React useEffect Cleanup Function

What is useEffect Cleanup Function in React?

Returning a function from useEffect gives React a cleanup routine. It runs before the effect executes again and once more when the component unmounts, which is where you cancel timers, remove listeners, close sockets and abort requests.

Why useEffect Cleanup Function matters

Without cleanup, a component that mounts and unmounts repeatedly leaks a timer or listener each time. The symptoms — memory growth, duplicate network calls, "cannot update state on an unmounted component" — all trace back to a missing cleanup.

useEffect Cleanup Function example

// interval
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

// event listener
useEffect(() => {
  const onResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', onResize);
  return () => window.removeEventListener('resize', onResize);
}, []);

// subscription
useEffect(() => {
  const sub = socket.subscribe(roomId, onMessage);
  return () => sub.unsubscribe();
}, [roomId]);

How this works

Each cleanup undoes exactly what its effect set up. Note the listener uses the same function reference for add and remove — an inline arrow in removeEventListener would remove nothing.

Key points to remember

• Cleanup runs before every re-run, not only on unmount.
• It receives no arguments — capture what you need in the effect’s closure.
• StrictMode deliberately exercises cleanup in development so missing ones surface early.

Common mistakes with useEffect Cleanup Function

• Passing a different function reference to removeEventListener than to addEventListener.
• Returning a promise from the effect (an async effect function) — the return value must be a cleanup function or nothing.