What is a stale closure in React and how do you fix it?

Every render creates new variables and new functions. A callback created during render closes over that render's values. If the callback is registered once and never replaced, it keeps seeing the values from the render in which it was created, even after the component has re-rendered many times.

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // always 0 + 1
    }, 1000);

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

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

Fixes, in order of preference

• Use a functional update when the next state depends on the previous state
• Add the captured value to the dependency array and let the effect re-subscribe
• Keep a ref in sync when a long-lived callback needs the latest value without re-subscribing
• Use useEffectEvent where available to read the latest values from inside an effect without making them dependencies

useEffect(() => {
  const id = setInterval(() => {
    setCount((current) => current + 1);
  }, 1000);

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

A ref can hold the latest callback or value, but do not read or write it during render except for initialisation. Refs are an escape hatch for behaviour that genuinely should not trigger a re-subscription, not a default way to avoid dependencies.