How do you handle cleanup in useEffect?

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

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

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

2. Timers and Intervals

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

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

3. Subscriptions

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

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

4. Abort Fetch Requests

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