Sentry Answers>React>

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

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

Matthew C.

The ProblemJump To Solution

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

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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.

  • Syntax.fmReact Server Components
  • Sentry BlogFixing memoization-breaking re-renders in React
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Loved by over 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.