React State is a Snapshot

| mental-model

A common point of confusion is why console.log shows the old value right after setState.

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

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still 0!
}

The Mental Model

State is not a variable you can mutate. It’s a snapshot for the current render.

  1. Trigger: You click logic.
  2. Schedule: setCount(0 + 1) tells React “In the next render, count should be 1”.
  3. Render: React calls your component function again. This time useState(0) returns 1.
  4. Paint: The UI updates.

Think of functionality inside your component as closing over the state of that specific render.