A tiny asynchronous effect library for React.
Just run yarn add @rishiosaur/async
or npm i @rishiosaur/async
(whichever floats your boat) to grab the latest version.
async
comes with two kinds of hooks: usePromiseEffect
and useAsyncEffect
. Note: most implementations of promise/asynchronous effects are largely the same—this one just happens to be a little bit faster and has some great types.
usePromiseEffect
This hook returns an array of [value, loading, error]
; the main hook passed to it must return some Promise<T>
.
All error handling and internal state management is done for you; all you have to do is write the promise resolution logic!
Basic Example:
const App = () => {
const [value, loading, err] = usePromiseEffect(() =>
fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>
response.json()
)
);
return (
<>
<p>
{!loading
? err
? JSON.stringify(err, null, 2)
: JSON.stringify(value, null, 2)
: 'Loading'}
</p>
</>
);
};
useAsyncEffect
This is much like usePromiseEffect
, but it's much more like React's internal useEffect
than anything:
Basic example:
function App() {
const [state, setState] = useState();
useAsyncEffect(async () => {
const data = await fetch(
`https://jsonplaceholder.typicode.com/posts/50`
).then((res) => res.json());
setState(data);
});
return (
<>
<p>{JSON.stringify(state, null, 2)}</p>
</>
);
}
Unlike React's useEffect
, both hooks come with dependency array defaults; you just need to supply the hooks.
useAsyncEffect
also has settings for cleanup functions & mounted states.
Generated using TypeDoc