Q314: How do you handle cleanup in useEffect? - React & Modern Frontend (445 Qs)

The cleanup function in useEffect is used to clean up side effects before the component unmounts or before the effect runs again. This prevents memory leaks, stale data, and unexpected behavior.

Syntax

useEffect(() => {
// Setup code

return () => {
  // Cleanup code
};
}, [dependencies]);

Common Cleanup Scenarios

1. Event Listeners

jsx

useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);

return () => window.removeEventListener('resize', handleResize);
}, []);

2. Timers and Intervals

jsx

useEffect(() => {
const intervalId = setInterval(() => {
  setCount(c => c + 1);
}, 1000);

return () => clearInterval(intervalId);
}, []);

3. Subscriptions

jsx

useEffect(() => {
const subscription = dataSource.subscribe(handleChange);

return () => subscription.unsubscribe();
}, [dataSource]);

4. Abort Fetch Requests

jsx

useEffect(() => {
const controller = new AbortController();

fetch(url, { signal: controller.signal })
  .then(response => response.json())
  .then(data => setData(data))
  .catch(err => {
    if (err.name !== 'AbortError') {
      setError(err);
    }
  });

return () => controller.abort();
}, [url]);

When Cleanup Runs:

Before the component unmounts
Before re-running the effect when dependencies change