Closures

Foundational

Closures are how JavaScript functions remember variables from where they were created. Understanding closures is essential for every React hook.

💡 Every React hook relies on closures. Master this concept and useState, useEffect, and useCallback will all make sense.

What is a Closure?

Inner functions remember their outer scope variables — like sealing a value inside a time capsule.

Closures in Loops

The classic var vs let trap. Why all your callbacks share the same value — and how to fix it.

Stale Closures

When a function captures an old value and never sees the update. The #1 React hooks gotcha.

Closures & Hooks

Each render creates a new closure. This is why dependency arrays exist and why stale state happens.

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

Stale closures in useEffect / setInterval

The callback captures the initial state value and never sees updates

Don't do this

counter.tsx

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

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // always 0 — stale closure!
    }, 1000);
    return () => clearInterval(id);
  }, []); // empty deps = captures initial count

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

When useEffect runs with an empty dependency array, the callback captures the state values from the initial render. If state changes later, the closure still references the old value. Use the functional updater form of setState, or use a ref to always access the current value.

Closures in loops with var

All callbacks in a var loop share the same variable — the final value

Don't do this

loop.js

// Prints 3, 3, 3 instead of 0, 1, 2
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// var is function-scoped — one i shared across all iterations

Variables declared with var are function-scoped, not block-scoped. In a for loop, there is only one i variable shared across all iterations. By the time the callbacks execute, the loop has finished and i holds its final value. Use let instead — it creates a new binding per iteration.

Stale closures in event handlers

Event handlers registered in useEffect capture state from when the effect ran

Don't do this

chat.tsx

function Chat() {
  const [message, setMessage] = useState("hello");

  useEffect(() => {
    const handler = () => alert(message); // stale if message changes
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []); // missing message in deps!

  return <input value={message} onChange={e => setMessage(e.target.value)} />;
}

When an event handler is registered in useEffect and references state, it captures the value from when the effect ran. If the effect doesn't re-run (due to missing dependencies), the handler sees stale data forever. Include the state variable in the dependency array so the effect re-registers the handler.

function Counter() { const [count, setCount] = useState(0); useEffect(() => { const id = setInterval(() => { console.log(count); // always 0 — stale closure! }, 1000); return () => clearInterval(id); }, []); // empty deps = captures initial count return <button onClick={() => setCount(c => c + 1)}>{count}</button>; }

function Chat() { const [message, setMessage] = useState("hello"); useEffect(() => { const handler = () => alert(message); // stale if message changes window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); // missing message in deps! return <input value={message} onChange={e => setMessage(e.target.value)} />; }

Closures

Common Mistakes

Closures

Common Mistakes