Prevent "React state update on unmounted component" warning when setting state on async callback

Question

I want to trigger an asynchronous operation from an event handler on a component and after that operation completes, update some UI state in that component. But the component may be removed from the DOM at any time, due to user navigating to another page. If that happens while the operation hasn't completed yet, React logs this warning:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Here's a reproducible example:

import { useState } from "react";
import ReactDOM from "react-dom";
// The router lib is a detail; just to simulate navigating away.
import { Link, Route, BrowserRouter } from "react-router-dom";

function ExampleButton() {
  const [submitting, setSubmitting] = useState(false);

  const handleClick = async () => {
    setSubmitting(true);
    await doStuff();
    setSubmitting(false);
  };

  return (
    <button onClick={handleClick} disabled={submitting}>
      {submitting ? "Submitting" : "Submit"}
    </button>
  );
}

function doStuff() {
  // Suppose this is a network request or some other async operation.
  return new Promise((resolve) => setTimeout(resolve, 2000));
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/other">Other</Link>
      </nav>
      <Route path="/" exact>
        Click the button and go to "Other" page
        <br />
        <ExampleButton />
      </Route>
      <Route path="/other">Nothing interesting here</Route>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

You can see and run the example here. If you click the Submit button and then the "Other" link before 2 seconds pass, you should see the warning on the console.

Is there an idiomatic way or pattern for dealing with these scenarios where a state update is needed after an async operation?

What i've tried

My first attempt to fix this warning was to track whether the component has been unmounted or not using a mutable ref and a useEffect() hook:

function ExampleButton() {
  const [submitting, setSubmitting] = useState(false);
  const isMounted = useRef(true);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  const handleClick = async () => {
    setSubmitting(true);
    await doStuff();
    if (isMounted.current) setSubmitting(false);
  };

  return (
    <button onClick={handleClick} disabled={submitting}>
      {submitting ? "Submitting" : "Submit"}
    </button>
  );
}

Notice the conditional call to setSubmitting() after the doStuff() call.

This solution works, but i'm not too satisfied with it because:

• It's quite bolerplate-ish. All the manual isMounted tracking seems like a low-level detail, unrelated to what this component is trying to do, and not something i'd want to repeat on other places that need a similar async operation.
• Even if the boilerplate was hidden into a custom useIsMounted() hook, is seems that isMounted is an antipattern. Yes, the article is talking about the Component.prototype.isMounted method, which is not present on function components like the one i'm using here, but i'm basically emulating the same function with the isMounted ref.

Update: i've also seen the pattern of having a didCancel boolean variable inside the useEffect function, and using that to conditionally do stuff after the async function or not (because of an unmount or updated dependencies). I can see how this approach, or using a cancellable promise, would work nice in cases where the async operation is confined to a useEffect() and is triggered by component mount/update. But i cannot see how they would work in cases when the async operation is triggered on an event handler. The useEffect cleanup function should be able to see the didCancel variable, or the cancellable promise, so they would need to be lifted up to the component scope, making them virtually the same as the useRef approach mentioned above.

So i'm kind of lost on what to do here. Any help will be appreciated! :D

Rancho

https://mcmap.net/q/878464/-why-is-the-cancelledpromise-pattern-considered-better-than-the-ismounted-quot-antipattern-quot-in-react/2333214 – Finalism

The documentation you linked suggests cancellable promises as a solution – Finalism

@TJ thanks for the link! and regarding cancellable promises, yes, i forgot to mention them in my question, but basically, i can see how they could be used when loading data on component mount/update with useEffect+cleanup, but i don't see how they could be used on an example like this where the async op is triggered on an event listener. how would the useEffect cleanup function know which promise to cancel? – Rancho

Lifting up variables to the component scope may not be the same as using useRef. The document stated that The difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render. – Cartesian

Answer 1

Indeed this.isMounted() is deprecated, and the usage of a _isMounted ref or instance variable is an anti pattern, notice that the usage of a _isMounted instance property was suggested as a temporary migration solution when this.isMounted() was deprecated because eventually it has the same problem of this.isMounted() which is leading to memory leaks.

The solution to that problem is that your component -whether a hook based or class based component, should clean it's async effects, and make sure that when the component is unmounted, nothing is still holding reference to the component or needs to run in the context of the component (hook based components), which makes the garbage collector able to collect it when it kicks in.

In your specific case you could do something like this

function ExampleButton() {
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    if (submitting) {
      // using an ad hoc cancelable promise, since ECMAScript still has no native way to cancel promises  
      // see example makeCancelable() definition on https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html
      const cancelablePromise = makeCancelable(doStuff())
      // using then since to use await you either have to create an inline function or use an async iife
      cancelablePromise.promise.then(() => setSubmitting(false))
      return () => cancelablePromise.cancel(); // we return the cleanup function
    }

  }, [submitting]);

  const handleClick = () => {
    setSubmitting(true);
  };

  return (
    <button onClick={handleClick} disabled={submitting}>
      {submitting ? "Submitting" : "Submit"}
    </button>
  );
}

Notice now that no matter what happens when the component is unmounted there is no more functionality related to it that might/will run

Gregoriagregorian

this is very nice, thanks! i hadn't thought about putting all async logic inside the useEffect hook and using the event handler only as a "trigger" for the useEffect. looks quite clean to me! – Rancho

also, may i suggest including references for the ad hoc cancellable promise and custom usePreviousState hook implementations on the answer? the latter could be a link to usehooks.com/usePrevious, or even copying the implementation in the answer to make it more self-contained :) – Rancho

@Rancho I added the usehooks.com as an example, for a reference for cancelable promises i did not add, since the reference might not match the example that i gave in terms of used methods, i did not want to focus over the details of a cancelable promise since it is not really that much related to the answer. Feel free to edit my example to match a certain implementation and to add a reference to that implementation if you wish – Gregoriagregorian

thanks @ehab. i went ahead and tweaked the implementation to remove the prvSubmitting state, since it was unneeded because the code inside useEffect() is already only executed when submitting is changed to true. i also added a reference to the cancelable promise implementation mentioned on the React blog article. – Rancho

Is this mentioned anywhere in the docs? This seems kind of important; I want to get an official confirmation on this method. – Massachusetts

Answer 2

The pattern to use to to set only if you're still mounted or not. You know if the component is still mounted as long as useEffect cleanup function was never called for the component.

export type IsMountedFunction = () => boolean;
export function useMounted(): IsMountedFunction {
  const mountedRef = useRef(false);
  useEffect(() => {
    mountedRef.current = true;
    return function useMountedEffectCleanup() {
      mountedRef.current = false;
    };
  }, []);
  return useCallback(() => mountedRef.current, [mountedRef]);
}

Given the above you the following hook that would handle the async then set state effect.

export function useAsyncSetEffect<T>(
  asyncFunction: () => Promise<T>,
  onSuccess: (asyncResult: T) => void,
  deps: DependencyList = []
): void {
  const isMounted = useMounted();
  useEffect((): ReturnType<EffectCallback> => {
    (async function wrapped() {
      const asyncResult = await asyncFunction();
      if (isMounted()) {
        onSuccess(asyncResult);
      }
    })();
  }, [asyncFunction, isMounted, onSuccess, ...deps]);
}

Sources and test are in

https://github.com/trajano/react-hooks/blob/master/src/useAsyncSetEffect/useAsyncSetEffect.ts

Note this does not get processed for correctness using ESLint react-hooks/exhaustive-deps

Remission