useAsyncEffect(async () => {
await doSomethingAsync();
});Installation
npm install use-async-effect
or
yarn add use-async-effect
This package ships with TypeScript and Flow types.
API
The API is the same as React's useEffect(), except for some notable differences:
- The destroy function is passed as an optional second argument:
useAsyncEffect(callback, dependencies?);
useAsyncEffect(callback, onDestroy, dependencies?);- The async callback will receive a single function to check whether the component is still mounted:
useAsyncEffect(async isMounted => {
const data1 = await fn1();
if (!isMounted()) return;
const data2 = await fn2();
if (!isMounted()) return;
doSomething(data1, data2);
});Examples
Basic mount/unmount
useAsyncEffect(async () => console.log('mount'), () => console.log('unmount'), []);Omitting destroy
useAsyncEffect(async () => console.log('mount'), []);Handle effect result in destroy
useAsyncEffect(() => fetch('url'), (result) => console.log(result));Making sure it's still mounted before updating component state
useAsyncEffect(async isMounted => {
const data = await fetch(`/users/${id}`).then(res => res.json());
if (!isMounted()) return;
setUser(data);
}, [id]);