Why is React state described as a snapshot?

State variables are constants for the duration of a render. The setter tells React to render again, and the next render receives the updated value. That is why logging state immediately after setting it shows the old value.

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

  function handleClick() {
    setCount(count + 1);
    console.log(count); // still the old value
  }

  return <button onClick={handleClick}>{count}</button>;
}

Why this matters

• Event handlers close over the state from the render in which they were created
• Multiple updates in one event are batched into a single render
• Use a functional updater when the next state depends on the previous state
• Do not try to read the new state from the same render

setCount((current) => current + 1);
setCount((current) => current + 1);