How to fix React Warning: Can't perform a React state update on an unmounted component

Matthew C.

—June 15, 2024

The Problem

When using a React version before version 18, you may encounter this common warning when using the useEffect hook:

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.

This warning is raised when there’s potential for a delay in setting the React state. For example, when setting the state after fetching data from an API in a useEffect:

useEffect(() => {
  fetchData(userId)
    .then((d) => {
      setData(d);
    })
    .catch((err) => {
      // handle error
    });
}, [userId]);

The component unmounts before the data fetch request is completed causing the warning message. The warning aims to protect against memory leaks where memory is used and not freed up again after use, which can lead to performance issues.

The Solution

You can ignore the warning if setting the state on an unmounted component does not cause a memory leak, like when setting the state after a fetch request promise is resolved. This happens if a fetch request is made in a component and the response is received after the component is unmounted.

In the code example above, you can ignore the warning as there’s no memory leak. When you try to set the state on an unmounted component, React ignores the operation.

To fix the warning, upgrade your React version and cancel any subscriptions that can cause memory leaks.

Upgrade to React 18+

This warning will go away if you upgrade to React version 18+. The warning message was removed in React 18 as the most common causes of the warning were state changes that weren’t memory leaks. Workarounds to remove the error message also added unnecessary code that did not protect against memory leaks.

Cancel Subscriptions in a useEffect Cleanup Function

If you have effects with subscriptions, such as registering event listeners, remove the subscriptions in a cleanup function:

useEffect(() => {
  function onClickEvent(value) {
    // ...
  }

  socket.on('click', onClickEvent);
  return () => {
    socket.off('click', onClickEvent);
  };
}, []);

Memory leaks can occur when you subscribe to something, such as an event or socket in a useEffect but don’t unsubscribe from it. For example, if you’re using a library such as socket.io for real-time bidirectional event-based communication, you’ll get a memory leak if you register event listeners in a useEffect but don’t remove them in a cleanup function:

useEffect(() => {
  function onClickEvent(value) {
    // ...
  }

  socket.on('click', onClickEvent);
}, []);

Duplicate event registrations will be created each time the component is mounted. If the above useEffect had dependencies, event registrations would be created each time a dependency changed.