How does React batch multiple setState calls in one event handler?

WHAT THIS TESTS: This question probes whether you understand React's update scheduling model, specifically automatic batching, and the difference between passing a value versus an updater function to a state setter. Interviewers want to see that you know state updates are queued rather than applied immediately, and that you can explain why multiple setState calls inside one event handler do not always produce the intuitive result.

A GOOD ANSWER COVERS: First, explain that React batches state updates inside event handlers, meaning it waits until all code in the handler has run before processing the queued updates and performing a single re-render. Second, clarify that because state values are fixed snapshots for any given render, calling setNumber(number + 1) three times in the same handler reads the same stale number value each time, so the state only increments by one. Third, describe updater functions: passing setNumber(n => n + 1) three times queues three functions that React runs in sequence during the next render, using the previous queued result as the input for the next, yielding a total increment of three. Fourth, note that React does not batch across separate intentional events such as distinct user clicks, which prevents bugs like submitting a disabled form.

COMMON WRONG ANSWERS: A major red flag is claiming that setState is synchronous and mutates state immediately. Another is saying each setState call triggers its own re-render in real time. Some candidates confuse batching with debouncing or throttling. Others forget to mention updater functions and cannot explain why three identical literal setState calls result in a single increment. Avoid implying that React 18 changed batching to only work inside useTransition or that batching is opt-in.

LIKELY FOLLOW-UPS: The interviewer might ask how automatic batching differs in React 18 versus older versions, specifically that React 18 batches all updates including setTimeout and promises while legacy React only batched inside React event handlers. They might ask when you would use an updater function over a direct value, or how to force synchronous updates if absolutely necessary. They could also ask how this behavior affects multiple state variables in the same handler.

ONE CONCRETE EXAMPLE: Imagine a counter starting at zero. Inside an onClick handler, calling setCount(count + 1) three times results in count becoming one because count is zero in that closure. Calling setCount(c => c + 1) three times results in count becoming three because React queues the updater functions and runs them in order: zero plus one is one, one plus one is two, two plus one is three.

Source: react.dev