React useEffect Cleanup Rule

When using useEffect for side effects that persist (like event listeners or timers), you must return a cleanup function.

useEffect(() => {
  const handleResize = () => setIsMobile(window.innerWidth < 768);
  
  window.addEventListener('resize', handleResize);
  
  // Cleanup function
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Empty dependency array = run on mount/unmount

Why?

If you don’t clean up, you’ll get memory leaks or unexpected behavior (e.g., multiple event listeners firing) when the component unmounts or re-renders.