useAsyncEffect

Simple type-safe async effects for React powered by generator functions.

import React from "react";
import useAsyncEffect from "@n1ru4l/use-async-effect";

const MyComponent = ({ filter }) => {
  const [data, setData] = React.useState(null);
  useAsyncEffect(
    function* (onCancel, c) {
      const controller = new AbortController();
  onCancel(() => controller.abort());

  const data = yield* c(
    fetch("/data?filter=" + filter, {
      signal: controller.signal,
    }).then((res) => res.json())
  );

  setData(data);
},
[filter]
  );
  return data ?  : null;
};

• Install Instructions
• The problem
• Example
  • Before 😖
  • After 🤩
• Usage
  • Basic Usage
  • Cancel handler (Cancelling an in-flight

    fetch

    request)
  • Cleanup Handler
  • Setup eslint for

    eslint-plugin-react-hooks

  • TypeScript
• API

  • useAsyncEffect

    Hook
• Contributing
• LICENSE

Install Instructions

yarn add -E @n1ru4l/use-async-effect

or

npm install -E @n1ru4l/use-async-effect

The problem

Doing async stuff with

useEffect

• 😖 You cannot pass an async function to

  useEffect

• 🤢 You cannot cancel an async function
• 🤮 You have to manually keep track whether you can set state or not

This micro library tries to solve this issue by using generator functions:

• ✅ Pass a generator to

  useAsyncEffect

• ✅ Return cleanup function from generator function
• ✅ Automatically stop running the generator after the dependency list has changed or the component did unmount
• ✅ Optional cancelation handling via events e.g. for canceling your

  fetch

  request with

  AbortController

Example

Before 😖

import React, { useEffect } from "react";

const MyComponent = ({ filter }) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    let isCanceled = false;
    const controller = new AbortController();
const runHandler = async () => {
  try {
    const data = await fetch("/data?filter=" + filter, {
      signal: controller.signal,
    }).then((res) => res.json());
    if (isCanceled) {
      return;
    }
    setData(data);
  } catch (err) {}
};

runHandler();
return () => {
  isCanceled = true;
  controller.abort();
};
  }, [filter]);
  return data ?  : null;
};

After 🤩

import React from "react";
import useAsyncEffect from "@n1ru4l/use-async-effect";

const MyComponent = ({ filter }) => {
  const [data, setData] = useState(null);
  useAsyncEffect(
    function* (onCancel, c) {
      const controller = new AbortController();
  onCancel(() => controller.abort());

  const data = yield* c(
    fetch("/data?filter=" + filter, {
      signal: controller.signal,
    }).then((res) => res.json())
  );

  setData(data);
},
[filter]
  );
  return data ?  : null;
};

Usage

Works like

useEffect

Basic Usage

import React, { useState } from "react";
import useAsyncEffect from "@n1ru4l/use-async-effect";

const MyDoggoImage = () => {
  const [doggoImageSrc, setDoggoImageSrc] = useState(null);
  useAsyncEffect(function* (_, c) {
    const { message } = yield* c(
      fetch("https://dog.ceo/api/breeds/image/random").then((res) => res.json())
    );
    setDoggoImageSrc(message);
  }, []);
  return doggoImageSrc ?  : null;
};

Cancel handler (Cancelling an in-flight

fetch

request)

You can react to cancels, that might occur while a promise has not resolved yet, by registering a handler via

onCancel

onCancel

import React, { useState } from "react";
import useAsyncEffect from "@n1ru4l/use-async-effect";

const MyDoggoImage = () => {
  const [doggoImageSrc, setDoggoImageSrc] = useState(null);
  useAsyncEffect(function* (onCancel, c) {
    const abortController = new AbortController();
    onCancel(() => abortController.abort());
    const { message } = yield c(
      fetch("https://dog.ceo/api/breeds/image/random", {
        signal: abortController.signal,
      }).then((res) => res.json())
    );
    setDoggoImageSrc(message);
  }, []);
  return doggoImageSrc ?  : null;
};

Cleanup Handler

Similar to

React.useEffect

import React, { useState } from "react";
import useAsyncEffect from "@n1ru4l/use-async-effect";

const MyDoggoImage = () => {
  const [doggoImageSrc, setDoggoImageSrc] = useState(null);
  useAsyncEffect(function* (_, c) {
    const { message } = yield* c(
      fetch("https://dog.ceo/api/breeds/image/random").then((res) => res.json())
    );
    setDoggoImageSrc(message);
const listener = () => {
  console.log("I LOVE DOGGIES", message);
};
window.addEventListener("mousemove", listener);
return () => window.removeEventListener("mousemove", listener);
  }, []);
  return doggoImageSrc ?  : null;
};

Setup eslint for

eslint-plugin-react-hooks

You need to configure the

react-hooks/exhaustive-deps

useAsyncEffect

Add the following to your eslint config file:

{
  "rules": {
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useAsyncEffect"
      }
    ]
  }
}

TypeScript

We expose a helper function for TypeScript that allows interferring the correct Promise resolve type. It uses some type-casting magic under the hood and requires you to use the

yield*

yield

useAsyncEffect(function* (setErrorHandler, c) {
  const numericValue = yield* c(Promise.resolve(123));
  // type of numericValue is number 🎉
});

API

useAsyncEffect

Hook

Runs a effect that includes async operations. The effect ins cancelled upon dependency change/unmount.

function useAsyncEffect(
  createGenerator: (
    setCancelHandler: (
      onCancel?: null | (() => void),
      onCancelError?: null | ((err: Error) => void)
    ) => void,
    cast: (promise: Promise) => Generator, T>
  ) => Iterator,
  deps: React.DependencyList
): void;

Contributing

Please check our contribution guides Contributing.

LICENSE

MIT.