JSPM – use-async-effect@2.2.7

Package Exports

use-async-effect
use-async-effect/index.js

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

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