The Stale Closure Problem

Every Render Has Its Own Closures

This is the mental model that changes everything. When React calls your component function, every variable declared during that render — including state, props, and functions — belongs to that specific render. Closures created during that render capture those values forever.

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

  function handleClick() {
    // This closure captures count from THIS render.
    // If count is 0 when this function is created,
    // it will always see count = 0, even if the user
    // clicks 10 more times.
    setTimeout(() => {
      alert(`Count was: ${count}`);
    }, 3000);
  }

  return <button onClick={handleClick}>Alert count: {count}</button>;
}

Click when count is 3, wait 3 seconds, and the alert shows "Count was: 3" — even if count is now 7. The closure captured 3, not the latest value.

The Classic setInterval Trap

If you've used React for more than a week, you've probably hit this one. The most notorious stale closure in React:

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // count is ALWAYS 0 in this closure
    }, 1000);
    return () => clearInterval(id);
  }, []); // Empty deps → effect runs once → closure captures count = 0

  return <div>{count}</div>;
}
// Result: count stays at 1 forever
// setCount(0 + 1) = 1 → setCount(0 + 1) = 1 → setCount(0 + 1) = 1 ...

The effect runs once (empty deps), capturing count = 0. Every second, setCount(0 + 1) runs. Count becomes 1, but the next tick still sees count = 0. It is stuck.

Fix 1: Functional Updater

useEffect(() => {
  const id = setInterval(() => {
    setCount(prev => prev + 1); // Reads latest state from the queue
  }, 1000);
  return () => clearInterval(id);
}, []);

The functional updater does not read from the closure. It receives the latest pending state from React's internal queue. This is the simplest fix for state-dependent updates in stale closures.

Fix 2: Ref Escape Hatch

function Timer() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count; // Keep ref in sync with state
  });

  useEffect(() => {
    const id = setInterval(() => {
      // ref.current always has the latest value
      setCount(countRef.current + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

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

The ref is updated after every render, so countRef.current always has the latest count. The interval reads the ref instead of the stale closure value.

Fix 3: Include Dependency (Re-create Interval)

useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1); // count is fresh — effect re-runs when count changes
  }, 1000);
  return () => clearInterval(id);
}, [count]); // Re-creates interval every time count changes

This works but is inefficient ��� the interval is destroyed and recreated every second. For timers, the functional updater (Fix 1) is usually best.

Stale Closures in Event Handlers

function Chat() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);

  function handleSend() {
    // message is from the render when handleSend was created.
    // If React batches and this handler was created during a
    // previous render, message might be stale.
    sendToServer(message);
    setMessages(prev => [...prev, message]);
    setMessage('');
  }

  return (
    <div>
      <input value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}

In this specific case, handleSend reads message from the current render where the click happens, so it is fresh. But if handleSend were used as a callback passed to a child component or stored somewhere, it could become stale.

Stale Closures in useEffect

function AutoSave({ data }) {
  useEffect(() => {
    const id = setInterval(() => {
      // data is stale if deps do not include data
      save(data);
    }, 5000);
    return () => clearInterval(id);
  }, []); // BUG: data is not in deps → stale closure

  // Fix: Include data in deps
  useEffect(() => {
    const id = setInterval(() => {
      save(data);
    }, 5000);
    return () => clearInterval(id);
  }, [data]); // Interval recreated when data changes
}

The useEvent Workaround

Until useEvent ships (and we've been waiting a while), here's the pattern for a stable callback that always reads fresh state:

function useLatest(value) {
  const ref = useRef(value);
  ref.current = value;
  return ref;
}

function useStableCallback(fn) {
  const fnRef = useLatest(fn);
  return useCallback((...args) => fnRef.current(...args), []);
}

// Usage:
function Chat({ onSend }) {
  const [message, setMessage] = useState('');

  const stableSend = useStableCallback(() => {
    onSend(message); // Always reads latest message
  });

  useEffect(() => {
    // stableSend is stable — effect does not re-run when message changes
    socket.on('send-shortcut', stableSend);
    return () => socket.off('send-shortcut', stableSend);
  }, [stableSend]);
}

Challenge: Fix the Stale Timer

Challenge: Debounce with Latest Value

// This search auto-submits after 500ms of no typing.
// But it always submits the FIRST character typed, not the latest.
// Fix the stale closure.

function Search() {
  const [query, setQuery] = useState('');

  useEffect(() => {
    if (!query) return;

    const timeoutId = setTimeout(() => {
      // BUG: query is stale — captured from the first effect run
      submitSearch(query);
    }, 500);

    return () => clearTimeout(timeoutId);
  }, []); // Missing dependency!

  return (
    <input
      value={query}
      onChange={e => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

function Search() {
  const [query, setQuery] = useState('');

  useEffect(() => {
    if (!query) return;

    const timeoutId = setTimeout(() => {
      submitSearch(query); // Fresh query from current render
    }, 500);

    return () => clearTimeout(timeoutId); // Cancel previous timeout
  }, [query]); // Re-run effect when query changes

  return (
    <input
      value={query}
      onChange={e => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}