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
npm install use-simple-async
or
yarn add use-simple-async
Usage
import useSimpleAsync from "use-simple-async";
import fs from "filesystem";
const getIOData = async (path: string) => await fs.readDir(path); // [{name: string, path: string}]
const fetchComplexData = (arg1: string, arg: { internalArg: string }) => string;
const App = () => {
// with one argument
const [data, { loading, error }] = useSimpleAsync(getIOData, {
variables: "/",
});
// or - with multiple arguments - all of this is typesafe!
const [data, { loading, error }] = useSimpleAsync(fetchComplexData, {
variables: ["asd", { internalArg: "asd" }],
});
// ---
if (loading) return <div>Loading...</div>;
if (error) return <div>Something went wrong.</div>;
return <div>{data.map((e) => e.name)}</div>;
};
API
function useSimpleAsync<T, V extends Array<any>>(
asyncFunc: (...variables: V) => Promise<T>,
options: { skip?: boolean; variables: V, useLayout?: boolean }
): [T | undefined, FuncMeta];
function useSimpleAync<T, V>(
functionToExec: (variables?: V) => Promise<T>,
options?: { variables?: V; skip?: boolean, useLayout?: boolean }
): [T, { loading: string; error: unknown; retry: () => void }];
function useSimpleAsync<T, V>(
asyncFunc: (variables: V) => Promise<T>,
options: { skip?: boolean; variables: V, useLayout?: boolean }
): [T | undefined, FuncMeta];
function useSimpleAsync<T>(
asyncFunc: (variables?: undefined) => Promise<T>,
options?: { skip?: boolean; variables?: undefined, useLayout?: boolean }
): [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:
import useSimpleAsync from "use-simple-async";
const fetchSimpleData = (arg1: string) => string;
const App = () => {
const [variables, setVariables] = useState({ input: "hello" });
// Option one(recommended): Let the hook handle variables
const [data, { loading, error }] = useSimpleAsync(fetchSimpleData, {
variables,
});
// ---
// Option two: Handle everything yourself
// useCallback is important here!
const fetchData = useCallback(
() => fetchSimpleData(var1, var2, var3),
[var1, var2, var3]
);
const [data, { loading, error }] = useSimpleAsync(fetchData);
// ---
const handleChangeVariables = () => {
setVariables({ input: "world!" });
};
if (loading) return "Loading...";
return (
<div>
{data?.output}
<button onClick={handleChangeVariables}>change variables</button>
</div>
);
};
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?
