Why does useEffect return a cleanup function?

Effects describe a synchronization process. Setup starts it and cleanup stops it. React calls cleanup before re-running the effect with new dependencies and once when the component unmounts. Without cleanup, every re-run can add another listener, timer or connection.

function Timer({ intervalMs }) {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setSeconds((current) => current + 1);
    }, intervalMs);

    return () => clearInterval(id);
  }, [intervalMs]);

  return <p>{seconds} seconds</p>;
}

What cleanup is for

• Removing event listeners and unsubscribing from stores
• Clearing timers and animation frames
• Aborting requests or ignoring their late results
• Disconnecting sockets and releasing third-party instances

useEffect(() => {
  let ignore = false;

  async function load() {
    const result = await fetchProfile(userId);
    if (!ignore) {
      setProfile(result);
    }
  }

  load();

  return () => {
    ignore = true;
  };
}, [userId]);

Cleanup is about correctness, not only memory. A late response or a duplicated listener can make the UI show the wrong state even if nothing leaks. The effect should be written so that setup, cleanup and another setup leaves the same result as a single setup.