useCurrentEffect

Sometimes we need to track if an effect has been cleaned up, because one of it's dependencies has changed, or the component was unmounted. The useCurrentEffect hook gives us a helper function as a parameter to track this state without the usual boilerplate.

Installation

npm i use-current-effect

Use

import { useCurrentEffect } from "use-current-effect";

// ...

useCurrentEffect((isCurrent) => {
  async function fetchData() {
    const article = await API.fetchArticle(id);
    if (isCurrent()) {
      setArticle(article);
    }
  }

  fetchData();
}, [id]);

Motivation

You could do this manually like this each time you want to make this check:

useEffect(() => {
  let didCancel = false;

  async function fetchData() {
    const article = await API.fetchArticle(id);
    if (!didCancel) {
      setArticle(article);
    }
  }

  fetchData();

  return () => {
    didCancel = true;
  };
}, [id]);

With useCurrentEffect you can do away with this boilerplate and make your effects more consise.

Callbacks

There is also useCurrentCallback which works in a similar way, however as the consumer of the hook may want to pass parameters to the callback function, we must use a slightly different pattern. useCurrentCallback takes a generator function so you may inject the checker function.

const onSearchOrders = useCurrentCallback(
  isCurrent => searchParams => {
    api.searchOrders(customerId, searchParams).then(results => {
      if (isCurrent()) {
        setSearchResults(results);
      }
    });
  },
  [customerId]
);

ESLint

If you use the ESLint rule react-hooks/exhaustive-deps then you can add the useCurrentEffect to your additionalHooks regex in your .eslint to ensure that you don't miss any dependencies.

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