Events and the state snapshot

Events and the state snapshot

Event handlers in React are props like onClick, onChange, and onSubmit, and their value is a function:

<button onClick={handleClick}>Save</button>
<button onClick={() => setCount(count + 1)}>+1</button>

Note you pass the function itself, handleClick, not a call handleClick(). Calling it would run immediately during render, not on click. You met this exact distinction with callbacks in Advanced JavaScript.

Now the subtle part. Look at the destructuring line: const [count, setCount] = useState(0). Within one render, count is a const local variable, assigned once when React called your function. Nothing can reassign it mid-render, and every handler you create during that render closes over that same value. Calling setCount stores a new value for the next render, it cannot rewrite the constant the current render already captured. People describe this by saying each render sees a snapshot of state. So what does this print-style puzzle do?

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

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

If count is 0, all three lines compute 0 + 1. The state ends up 1, not 3.

Functional updates

When the next value depends on the previous one, pass a function to the setter instead of a value:

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

React queues the updater functions and runs them in order, each receiving the latest value: 0 → 1 → 2 → 3. Rule of thumb: if the new state is computed from the old state, use the function form.