useState: state is a snapshot

useState gives a component a value that survives between renders, and a function to ask for a new one:

function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    console.log(count);   // still 0
  }
  return <button onClick={handleClick}>{count}</button>;
}

One click shows 1, not 3, and the log prints 0. Both surprises have the same cause.

A render sees one snapshot

Each render is one call of Counter. In that call, count is a const with a fixed value, and every function created during the call — including handleClick — closes over that value. Calling setCount does not touch the count variable. It queues an update and asks React to render the component again; the next call of Counter receives the new value. Inside the handler, count is 0 on every line, so all three calls queue "replace with 0 + 1".

Batching

React does not re-render after each setter call. It collects every update queued during the event handler and processes them together in one render after the handler returns. Since React 18 this automatic batching applies everywhere — inside promises, setTimeout and native event listeners too, not just React event handlers.

Value versus updater function

A setter accepts either a value or a function. A value means "replace the state with this". A function means "compute the next state from whatever the state is at this point in the queue". React applies the queue in order, feeding each updater the result of the step before:

The rule of thumb: if the next value depends on the previous one, pass an updater (setCount(c => c + 1)). Updaters must be pure — in development Strict Mode React calls them twice to surface side effects — so do not push to arrays or fire requests inside one.

Initial state runs once, but its expression does not

useState(initial) uses initial only on the first render; afterwards it is ignored. The expression is still evaluated on every render, though, so useState(buildBigTable()) calls buildBigTable every time and throws the result away. Pass the function instead — useState(buildBigTable) — and React calls it only for the first render.

Common mistakes

• Reading state right after setting it. setName(v); save(name) saves the old name. Use v directly, because name will not change until the next render.
• Incrementing with a value in a loop or a timer. Several setCount(count + 1) calls in one event collapse into one increment, as the first scenario in the example models.
• Side effects inside an updater. Strict Mode calls it twice in development, so the effect happens twice; updaters only compute.
• useState(expensive()) runs expensive on every render even though only the first result is used.