How to Fix a React useState Stale-State Bug

What the stale-state bug looks like

You have a handler that fires setState multiple times:

function addThree() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

Click the button when count is 0. You expect 3, but the counter shows 1.

All three calls read count from the enclosing render scope - it's 0 for all of them. React batches the three identical 0 + 1 = 1 updates into a single state transition, so only one increment lands.

The fix: functional updater form

Pass a function to setState instead of a value. React calls that function with the latest pending state as the argument, so each call sees the result of the previous one:

function addThree() {
  setCount(c => c + 1);
  setCount(c => c + 1);
  setCount(c => c + 1);
}

Now the sequence is: - First call: c = 0 -> 1 - Second call: c = 1 -> 2 - Third call: c = 2 -> 3

React applies the updates in order, and the counter correctly reaches 3.

Why the value form usually seems fine

A single setCount(count + 1) per click works correctly because React re-renders between clicks - so count is fresh the next time the handler runs. The stale-closure bug only bites when you queue multiple updates in one handler, in a loop, or inside an async callback where the render-time snapshot is already out of date.

When to always use the functional form

Use setState(prev => ...) whenever:

• You call setState more than once inside a single function
• You set state inside a setTimeout, setInterval, or async callback
• You derive the new value from the old value (counters, toggles, list appends)

A simple rule: if the new value depends on the previous value, use the functional updater. If it's completely independent (e.g. setName("Alice")), either form is fine.

Catching it early with ESLint

The react-hooks/exhaustive-deps rule flags stale dependencies in useEffect hooks. Enable it in your project's ESLint config:

{
  "rules": {
    "react-hooks/exhaustive-deps": "warn"
  }
}

For multi-setState handlers, code review and test coverage (a "+3 button should add 3" assertion) catch it before it ships.