What is the purpose of the useEffect cleanup function?
Your grasp of useEffect teardown before re-runs and unmount.
Explain cleanup prevents memory leaks by clearing timers or unsubscribing when dependencies change or on unmount.
What's really being asked
This question probes whether you see useEffect as a synchronization tool rather than a lifecycle method. The interviewer wants to know if you understand that effects from previous renders must be cleaned up before new effects run, and that cleanup is not merely an unmount afterthought. In React 18 and later, with Strict Mode intentionally double-invoking effects in development, missing cleanup logic surfaces immediately as bugs.
The full answer
First, the timing: the cleanup function runs once before the effect re-runs due to changed dependencies, and once after the component unmounts. Second, the purpose: preventing memory leaks, invalid subscriptions, and race conditions by tearing down connections to external systems. Third, concrete categories: clearing timers with clearInterval, aborting network requests with AbortController, unsubscribing from event emitters or Redux stores, and removing DOM event listeners. Fourth, the mental model: each render should be able to set up its own effect world without interference from the previous render's side effects.
The mistakes people make
Saying cleanup is only for component unmount ignores the re-run scenario and fails in Strict Mode. Returning a cleanup function that itself creates new subscriptions or state updates causes infinite loops. Forgetting to include reactive dependencies in the dependency array means the effect and cleanup may run far more often than necessary, or not often enough. Using an empty dependency array to avoid cleanup issues is a hack, not a solution.
What usually comes next
How does Strict Mode affect useEffect in development? The interviewer may ask you to explain why effects run twice and how cleanup catches this. What happens if you omit a dependency like a prop used inside the effect? They might probe whether you know that stale props lead to stale connections. How would you handle a fetch request that resolves after the component unmounts? This tests if you know to use an ignore flag or AbortController inside cleanup.
A concrete example
Imagine a ChatRoom component that connects to a server when roomId changes. Inside useEffect, you call createConnection(serverUrl, roomId).connect(). The returned cleanup calls connection.disconnect(). If the user switches from room A to room B, React first runs cleanup for room A, disconnecting the old socket, then runs the effect for room B, opening a new socket. Without cleanup, the room A socket persists as a memory leak and may still receive messages that overwrite room B's state.
Interview question
A useEffect subscribes to an external store. When a dependency changes and the effect must re-run, when does the cleanup function execute?
- a.After the new effect finishes, preserving the previous subscription until setup completes
- b.Once for every render, even when no dependencies have changed
- c.Only when the component finally unmounts from the DOM
- d.Immediately before the effect re-runs with the new dependency valuesCorrect
Why? this is the answer
React runs the cleanup function immediately before re-executing an effect when dependencies change, tearing down the previous render's side effects to prevent memory leaks and stale subscriptions. The most tempting distractor assumes cleanup is only for unmount, but that ignores the re-run scenario and fails under React 18 Strict Mode, which intentionally double-invokes effects to expose missing teardown logic.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles