Publication date: Jun 8, 2026
Reading time: 2 min read

Remembering useEffect Cleanup

A tiny walkthrough of the React pattern I always have to re-derive: subscribe, clean up, and avoid stale work.

useEffect is easy to remember as "run this after render," but the part I always have to slow down for is the cleanup function.

The rule: if an effect starts something that can outlive this render, return a function that stops it.

tsx

import { useEffect, useState } from "react";
 
export function WindowWidth() {
  const [width, setWidth] = useState(() => window.innerWidth);
 
  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }
 
    window.addEventListener("resize", handleResize);
    handleResize();
 
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
 
  return <p>The window is {width}px wide.</p>;
}

Import useEffect for the side effect and useState for the value React should re-render with.
The component stores the current browser width in state. The lazy initializer runs once when the component first mounts.
useEffect runs after React has put the component on the page, which is when it is safe to talk to browser APIs like window.
Define the event handler inside the effect so it can use the state setter and so the setup and teardown code share the exact same function reference.
Subscribe to the browser event, then call the handler once so state is correct even if the window changed between the initial render and the effect running.
Return a cleanup function. React calls it before the component unmounts, preventing a leftover listener from trying to update a component that no longer exists.
The empty dependency array means this setup happens once for this component instance. If a value from props or state were used inside the effect, it would usually belong here.
Render stays boring: it just reads state. The effect owns the subscription; the JSX owns the display.

The thing to memorize is not the syntax. It is the lifecycle pair:

Setup: add the listener, start the timer, open the subscription.
Cleanup: remove the listener, clear the timer, close the subscription.

If you can say what your effect starts, you should also be able to say what it stops.