What will count be after three setCount calls in a row?

WHAT THIS TESTS: This question probes your mental model of React state as a snapshot rather than a live variable, and whether you know how automatic batching works inside event handlers. Interviewers want to see that you understand closures, the render cycle, and the functional updater pattern.

A GOOD ANSWER COVERS: First, state the result clearly: count will be 1 after the handler runs, not 3. Second, explain why: the handleThreeClicks function was created during a render where count was 0, so all three calls read that same closed-over value and each computes 0 + 1. Third, mention batching: React gathers all state updates in the event handler and flushes them together after the handler finishes, so the three identical setCount(1) calls collapse into a single update. Fourth, give the fix: replace the direct value with an updater function, setCount(prev => prev + 1), called three times. React queues these functions and runs them in order against the pending state, producing 1, then 2, then 3.

COMMON WRONG ANSWERS: A red flag is saying the count becomes 3 because React processes state updates synchronously line by line. Another red flag is suggesting workarounds like wrapping the calls in setTimeout, awaiting a Promise, or using useEffect to chain increments; these show a lack of familiarity with the built-in updater pattern. Also avoid inventing a loop without explaining why the updater is necessary, or claiming that batching can be disabled with a flag.

LIKELY FOLLOW-UPS: The interviewer might ask how this behavior changes in React 18 versus older versions, specifically whether updates outside of event handlers were batched before automatic batching. They might also ask what happens if you mix direct values and updaters in the same handler, or how you would derive the next state from props as well as state. A deeper variant is asking how this queueing mechanism works inside useReducer or how it interacts with concurrent features.

ONE CONCRETE EXAMPLE: Imagine a shopping cart where clicking Add Item three times quickly should increase the quantity from 0 to 3. Writing setQuantity(quantity + 1) three times would leave the cart at 1 item because each call uses the quantity from the original render. Writing setQuantity(q => q + 1) three times lets React process each increment against the latest queued value, giving the correct total of 3 without extra re-renders between each call.

Source: react.dev