React · Frontend system thinking
What is state batching in React?
Short answer
React groups multiple state updates that happen in the same tick into one render. React 18 and later also batch updates in promises, timeouts and native event handlers.
Batching avoids unnecessary renders when an event changes several pieces of state. The updates are queued, then React renders once with the final values.
function handleClick() {
setLoading(true);
setError(null);
setData(null);
}
// React renders once after the event handler finishes.Automatic batching
- React 17 batched updates inside React event handlers
- React 18 added automatic batching for promises, timeouts and native handlers
- Batching is based on when updates are queued, not on the number of setters
flushSyncopts out and forces a synchronous render, but should be rare
async function load() {
setLoading(true);
const data = await fetchData();
setData(data);
setLoading(false);
}Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1How did React 17 batching differ from React 18?
- 2Does batching happen across `await` boundaries?
- 3When would you use `flushSync`?
- 4Why is relying on intermediate renders fragile?
Say it in the interview
React batches state updates that are queued in the same tick and renders once with the final values. React 18 extended automatic batching to promises, timeouts and native event handlers, not just React events. Batching reduces wasted renders. I do not depend on intermediate renders for logic; if I truly need a synchronous DOM update, flushSync exists, but it is rare.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.