Closures and Stale State in Handlers

You build a click counter. You click the button 5 times quickly. The count says 1. You add a console.log — it prints the right number inside the handler. But the state update only shows the last value you started with. What's happening?

You've hit a stale closure. Your event handler captured an old version of count when it was created — and every click is updating from that same old starting point instead of the latest value.

A closure is a function that remembers the variables from where it was created. Think of it as a function carrying a backpack of variables.

function makeGreeter(name) {
  return function greet() {
    console.log('Hello, ' + name); // captured 'name'
  };
}
const greetAlice = makeGreeter('Alice');
greetAlice(); // "Hello, Alice" — always, even if nothing called 'Alice' exists anymore

The backpack contains a snapshot of name at the moment makeGreeter ran. That's fine for a greeter. The problem comes when the backpack should have today's value, but it still holds yesterday's.

Trap 1: setInterval with empty deps

// ❌ count is always 0 inside the interval
useEffect(() => {
  setInterval(() => setCount(count + 1), 1000);
}, []); // captured count = 0, never updates

Trap 2: async handler reading stale state

// ❌ Clicks during the fetch read the count from when the handler was created
async function handleClick() {
  await fetch('/api/save');
  console.log(count); // stale — not the count at save time
}

Trap 3: addEventListener without cleanup

// ❌ Each render adds a new listener; old ones hold old closures
useEffect(() => {
  window.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') submit(formData); // stale formData
  });
}); // no cleanup, no deps

Fix 1: functional state update (breaks the closure dependency)

// ✅ The updater function receives the latest state as an argument
useEffect(() => {
  const id = setInterval(() => {
    setCount(prev => prev + 1); // prev is always current — no closure on count
  }, 1000);
  return () => clearInterval(id);
}, []); // safe with empty deps now

Fix 2: useRef for latest value access

// ✅ Ref is mutable — closures always see the latest .current
const countRef = useRef(count);
useEffect(() => { countRef.current = count; });

async function handleClick() {
  await fetch('/api/save');
  console.log(countRef.current); // fresh — always the latest count
}

Fix 3: proper cleanup with correct deps

// ✅ Add dep + cleanup — handler recreated when formData changes
useEffect(() => {
  const handler = (e) => {
    if (e.key === 'Enter') submit(formData); // fresh formData
  };
  window.addEventListener('keydown', handler);
  return () => window.removeEventListener('keydown', handler);
}, [formData]); // re-run when formData changes

Click "Broken" and rapidly click the +1 button many times — you'll see the stale closure effect. Switch to "Fixed" and the same fast clicking works correctly.

Install eslint-plugin-react-hooks (it ships with Create React App and Vite React templates). It warns you about missing dependencies. Don't suppress the warnings — they're almost always pointing at a real bug.