What is the useEffect Cleanup Function in React?
Learn what the useEffect cleanup function is in React, when it runs, and how returning it prevents memory leaks, stale updates and duplicate listeners.
Expected Interview Answer
The useEffect cleanup function is the function you return from useEffect; React runs it to tear down an effect before the component unmounts and before the effect re-runs, preventing leaks and stale work.
Effects often set up subscriptions, timers, or event listeners that must be undone. Returning a function from useEffect tells React what to clean up: it runs that function when dependencies change (before the next effect) and when the component unmounts. This stops memory leaks, duplicate listeners, and stale state updates from in-flight async work. In development with Strict Mode, React intentionally mounts, unmounts, and remounts components so cleanup runs an extra time to surface missing teardown logic.
- Prevents memory leaks from lingering subscriptions
- Removes event listeners and clears timers reliably
- Avoids duplicate side effects on re-render
- Cancels or ignores stale async results
- Runs automatically on unmount and before re-running the effect
AI Mentor Explanation
After an innings ends, the ground staff pull up the stumps, cover the pitch and clear the boundary ropes before the next match can begin. The cleanup function is that end-of-innings tidy-up: React runs it to remove what the effect set up so the next render or unmount starts on a clean, safe field.
Step-by-Step Explanation
Step 1
Set up the effect
Inside useEffect, create the subscription, timer, or event listener you need.
Step 2
Return a function
Return a function from the effect; React stores it as the cleanup for that effect run.
Step 3
Cleanup on dependency change
When a dependency changes, React runs the old cleanup before running the new effect.
Step 4
Cleanup on unmount
When the component unmounts, React runs the last cleanup to release resources.
Step 5
Guard async results
Use a flag or AbortController in cleanup so stale async responses are ignored.
What Interviewer Expects
- Knows the returned function is the cleanup
- Explains it runs on unmount and before the next effect
- Gives examples: removeEventListener, clearInterval, unsubscribe
- Understands it prevents memory leaks and stale updates
- Aware Strict Mode runs cleanup an extra time in development
Common Mistakes
- Forgetting to clean up listeners or intervals, causing leaks
- Thinking cleanup only runs on unmount, not before re-runs
- Not cancelling async work, leading to state updates after unmount
- Returning a promise instead of a plain cleanup function
- Blaming Strict Mode's double-invoke instead of fixing missing cleanup
Best Answer (HR Friendly)
“The useEffect cleanup function is a bit of code React runs to tidy up after a component, like turning off timers or removing listeners when it is no longer needed. It stops apps from leaking memory or doing work they no longer should.”
Code Example
import { useEffect, useState } from 'react'
function WindowWidth() {
const [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
const onResize = () => setWidth(window.innerWidth)
window.addEventListener('resize', onResize)
// Cleanup: remove the listener before re-run or on unmount
return () => {
window.removeEventListener('resize', onResize)
}
}, [])
return <p>Width: {width}px</p>
}Follow-up Questions
- When exactly does React run the cleanup function?
- How do you cancel a fetch or ignore stale async results in cleanup?
- Why does Strict Mode run effects and cleanups twice in development?
- What happens if you forget the cleanup for a subscription?
- How does the dependency array affect when cleanup runs?
MCQ Practice
1. How do you define a cleanup for a useEffect?
The function you return from the useEffect callback is the cleanup that React runs on unmount and before re-running.
2. When does the cleanup function run?
React runs cleanup before each subsequent effect (when deps change) and again when the component unmounts.
3. Why might cleanup run twice in development?
Strict Mode deliberately double-invokes effects and cleanups in development to surface missing teardown logic.
Flash Cards
What is the useEffect cleanup? — The function returned from useEffect that tears down the effect.
When does cleanup run? — On unmount and before the effect runs again due to a dependency change.
Common cleanup tasks? — removeEventListener, clearInterval/clearTimeout, unsubscribe, abort fetch.
Why does it run twice in dev? — Strict Mode mounts, unmounts and remounts to expose missing cleanup.