use-async-effect
TypeScript icon, indicating that this package has built-in type declarations

2.2.7 • Public • Published

Logo npm version license


🏃 Asynchronous side effects, without the nonsense.

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 callback is still mounted:
useAsyncEffect(async isMounted => {
  const data1 = await fn1();
  if (!isMounted()) return;

  const data2 = await fn2();
  if (!isMounted()) return;

  doSomething(data1, data2);
});

Mounted means that it's running in the current component. It becomes unmounted if the component unmounts, or if the component is re-rendered and the callback is dropped and a new one is called.

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]);

Package Sidebar

Install

npm i use-async-effect

Weekly Downloads

20,464

Version

2.2.7

License

MIT

Unpacked Size

14.6 kB

Total Files

10

Last publish

Collaborators

  • houfio
  • rauldeheer