Package Exports

use-async-effect

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-async-effect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-async-effect

🏃 Asynchronous side effects, without the nonsense

useAsyncEffect(async () => {
  await doSomethingAsync();
});

Installation

npm install use-async-effect

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