What is the purpose of the useEffect cleanup function?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: react.dev