useSimpleAsync

The simplest(and lightest with less than 500 bytes gzipped) way to execute an asynchronous function in react

NOTE: This library is not supposed to be an alternative for useSWR or react-query. It is simply a lighter version of them, if you don't need all the features that those libraries provide

Ever wanted to simply execute an async function without all the hassle and you don't want cache or anything like that? This is it. Supplies both CJS and ESM builds.

Installation

1npm install use-simple-async

or

1yarn add use-simple-async

Usage

1import useSimpleAsync from "use-simple-async";
2import fs from "filesystem";
3
4const getIOData = async (path: string) => await fs.readDir(path); // [{name: string, path: string}]
5const fetchComplexData = (arg1: string, arg: { internalArg: string }) => string;
6
7const App = () => {
8  // with one argument
9  const [data, { loading, error }] = useSimpleAsync(getIOData, {
10    variables: "/",
11  });
12  // or - with multiple arguments - all of this is typesafe!
13  const [data, { loading, error }] = useSimpleAsync(fetchComplexData, {
14    variables: ["asd", { internalArg: "asd" }],
15  });
16  // ---
17
18  if (loading) return <div>Loading...</div>;
19  if (error) return <div>Something went wrong.</div>;
20
21  return <div>{data.map((e) => e.name)}</div>;
22};

API

1function useSimpleAsync<T, V extends Array<any>>(
2  asyncFunc: (...variables: V) => Promise<T>,
3  options: { skip?: boolean; variables: V, useLayout?: boolean }
4): [T | undefined, FuncMeta];
5
6function useSimpleAync<T, V>(
7  functionToExec: (variables?: V) => Promise<T>,
8  options?: { variables?: V; skip?: boolean, useLayout?: boolean }
9): [T, { loading: string; error: unknown; retry: () => void }];
10
11function useSimpleAsync<T, V>(
12  asyncFunc: (variables: V) => Promise<T>,
13  options: { skip?: boolean; variables: V, useLayout?: boolean }
14): [T | undefined, FuncMeta];
15
16function useSimpleAsync<T>(
17  asyncFunc: (variables?: undefined) => Promise<T>,
18  options?: { skip?: boolean; variables?: undefined, useLayout?: boolean }
19): [T | undefined, FuncMeta];

useLayout: true will execute your async function in useLayoutEffect instead of useEffect(default)

Refetching

Hook will automatically refetch when you change the function reference you provide to useSimpleAsync. A simple recipe for e.g. fetching data with different variables would look like this:

1import useSimpleAsync from "use-simple-async";
2
3const fetchSimpleData = (arg1: string) => string;
4
5const App = () => {
6  const [variables, setVariables] = useState({ input: "hello" });
7
8  // Option one(recommended): Let the hook handle variables
9  const [data, { loading, error }] = useSimpleAsync(fetchSimpleData, {
10    variables,
11  });
12  // ---
13
14  // Option two: Handle everything yourself
15  // useCallback is important here!
16  const fetchData = useCallback(
17    () => fetchSimpleData(var1, var2, var3),
18    [var1, var2, var3]
19  );
20  const [data, { loading, error }] = useSimpleAsync(fetchData);
21  // ---
22
23  const handleChangeVariables = () => {
24    setVariables({ input: "world!" });
25  };
26
27  if (loading) return "Loading...";
28
29  return (
30    <div>
31      {data?.output}
32      <button onClick={handleChangeVariables}>change variables</button>
33    </div>
34  );
35};

Submitting errors

If you see that something is not working for you or you'd like it to work differently, please don't hesistate to open a issue!

Why not use XXX?

• useSWR or react-query - too much features(unnecessarily big bundle), I just want to execute an async function.
• use-async-query - don't really like the API, also it's 6kB for something this small
• use-async-function - deprecated
• react-suspense-fetch - it's awesome, but I don't need Suspense and all the boilerplate, i just want to execute a function
• react-hooks-fetch - same as up, good library but too much boilerplate
• use-async - no TS support
• use-async-resource - 39kB(too big for something this simple)