Why Can’t My Component Unmount in React?

Fixing a common React race condition

Nick Harder
Dec 21, 2020 · 3 min read
Motorcycle racing
Motorcycle racing
Photo by Dan Garri on Unsplash.
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.

Sometimes, I read a warning and have absolutely no idea what it’s trying to tell me.

Let’s start with the first phrase: “Can’t perform a React state update on an unmounted component.” State updates are scattered in every component I build. The curious part is that one of these components is unmounted.

How is this possible? Most updates that occur in my code “react” to a user action. For instance, a button click:

The setter function provided by can either be passed a value or a function whose first argument is the current value.

Obviously, can only be called when the button is mounted and rendered. I’ll never encounter the warning with this code.

I still haven’t gotten anywhere. Reading the third sentence gives me a better hint. React is telling me to ensure that any subscription or asynchronous task was cancelled. The next step, then, is looking for asynchronous tasks!

3 Offenders

I find three offenders when I encounter this problem: an async function, a state change dependent on that function, and an event.

To triage the warning, I’ll set up a component for reference. It has one state variable:

function UnmountComponent() {
const [count, setCount] = useState(0);
...

The first offender I’ll deal with is an async function. It mimics loading some remote resource. It might be an axios or fetch call. It completes after two seconds.

This function is not in a React component:

function load() {
return new Promise(res => {
setTimeout(res, 2000);
});
}

Next, a criminal dependency. It’s a function that attempts to modify my React component’s state:

Finally, we need an event. One use case would be loading the remote resource and then navigating away from the route. In my example, I wrapped the breaking component in a higher-level one. This higher-level component simply unmounts the breaking component on a button press:

The warning is a race condition. The first step is to click the button in the following code:

Then, while the remote resource is loading, click on the button. When I open up the console, I can see the warning!

This happens because is called after the remote resource completed but also after the component unmounted.

Conclusion

You’re going to encounter this if you depend on promises and enable . It’s simply a race condition where your component unmounts while a remote resource is loading. One solution is to bring the remote resource call into a and listen for the unmount event:

The return function is called only when the component unmounts because it has no other dependencies.

I built the previous example in CodeSandbox. Feel free to run it with the reproduction steps to see the error.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Zack Shapiro

Nick Harder

Written by

Co-Founder and Director of Business at Abstra. Visit our company website at https://abstra.dev

Better Programming

Advice for programmers.

Nick Harder

Written by

Co-Founder and Director of Business at Abstra. Visit our company website at https://abstra.dev

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store