React Warning: Cannot Update an Unmounted Component — What It Means & How to Fix It

What Does This Error Mean?

This React warning means your code tried to update the state of a component after it was removed from the page. Imagine writing on a whiteboard, then someone erases it — you are still trying to write on a board that no longer exists. The most common cause is an asynchronous operation (like a network request or timer) that finishes after the user has already navigated away.

Affected Models

React 16 and React 17
React function components and class components

Common Causes

A fetch or API call completes and calls setState, but the user already navigated to a different page
A setTimeout or setInterval fires after the component was removed — for example a polling interval that was never cleared
An event listener added in useEffect or componentDidMount was never cleaned up in the return function or componentWillUnmount
A Promise chain resolves and calls setState, but the component that created it has unmounted
A subscription to a store or observable updates a component that is no longer mounted

How to Fix It

Every useEffect that starts async work must return a cleanup function. React calls this cleanup function automatically when the component unmounts.

The cleanup function is where you cancel timers, abort fetch requests, and remove event listeners.
For timers, save the timer ID and clear it in the cleanup. clearTimeout() for setTimeout, clearInterval() for setInterval.

Example: const id = setInterval(poll, 5000); return () => clearInterval(id);
For fetch requests, create an AbortController before the fetch and abort it in the cleanup function. Pass the controller's signal to the fetch call.

Example: const ac = new AbortController(); fetch('/api/data', { signal: ac.signal }); return () => ac.abort();
For class components, move cleanup logic to componentWillUnmount. Cancel any subscriptions, timers, or pending callbacks there.

Example: componentWillUnmount() { clearTimeout(this.timerId); this.subscription.unsubscribe(); }
If you cannot cancel the async operation, use a mounted flag. Set it to true on mount, false on unmount. Check the flag before calling setState.

Example: let mounted = true; fetchData().then(d => { if (mounted) setState(d); }); return () => { mounted = false; };

When to Call a Professional

This is always a code issue you can fix yourself. Adding proper cleanup functions to your useEffect hooks is the standard solution. While it is a warning (not a crash), it indicates a potential memory leak worth fixing.

Frequently Asked Questions

Is this warning a crash or just a warning?

It is just a console warning — it does not crash your app or affect what users see. However, it signals a potential memory leak. If many components do this, your app could gradually slow down as leaked timers and listeners accumulate. In React 18, this specific warning was removed, but the underlying issue (the potential memory leak) remains worth fixing.

Why does this warning appear randomly and not every time?

Because it depends on timing. The warning only fires when the async operation finishes after the component unmounts. If the user is on the page long enough for the request to complete, no warning. If they navigate away while the request is in flight, the warning fires when the response arrives. Slow API responses or slow network conditions make this more likely to appear.

Does React 18 fix this?

React 18 removed the warning, but the underlying code issue is the same. The React team decided the warning was more confusing than helpful, especially because some patterns (like Strict Mode's double-invocation) were triggering false positives. Removing the warning does not make the memory leak disappear. Cleanup functions in useEffect are still best practice in React 18.