What is State Batching in React?
Understand React state batching: how React groups setState calls into one re-render, React 18 automatic batching, updater functions and flushSync explained.
Expected Interview Answer
State batching is React's optimization of grouping multiple state updates that happen in the same tick into a single re-render, instead of re-rendering the component once for every setState call.
Before React 18, batching only happened inside React event handlers. React 18 introduced automatic batching everywhere — including promises, setTimeout, and native event handlers — thanks to the concurrent renderer. Because updates are batched, reading state right after a setState still shows the old value; to update based on the previous value you pass an updater function like setCount(c => c + 1). You can opt out for a synchronous flush using flushSync.
- Fewer re-renders, so better performance
- Consistent UI because all updates apply together
- Automatic everywhere in React 18, not just event handlers
- Avoids intermediate flicker between related updates
- Predictable, atomic state transitions
AI Mentor Explanation
A scorer does not update the giant stadium scoreboard after every single run, wide, and field change separately; they collect the events of a delivery and post the new total once. React batching works the same way — several state changes in one moment are gathered and the screen is redrawn a single time, rather than flickering through every intermediate score.
Step-by-Step Explanation
Step 1
Trigger multiple updates
Call setState several times in the same event handler or async callback.
Step 2
React queues them
Instead of rendering per call, React collects the updates into a single batch for the current tick.
Step 3
Use updater functions
When each update depends on the previous value, pass a function like setCount(c => c + 1) so all apply correctly.
Step 4
Single re-render commits
React processes the queued updates together and re-renders the component once with the final state.
Step 5
Opt out if needed
Wrap a critical update in flushSync to force a synchronous render before the next line runs.
What Interviewer Expects
- Definition of batching and why it reduces re-renders
- The React 18 automatic batching change versus older behaviour
- Why state looks stale immediately after setState
- When and why to use functional updater arguments
- Awareness of flushSync as an escape hatch
Common Mistakes
- Expecting state to update synchronously right after setState
- Adding to state with count + 1 instead of an updater function
- Believing batching still only happens in event handlers in React 18
- Overusing flushSync and reintroducing extra re-renders
- Confusing batching with debouncing or throttling
Best Answer (HR Friendly)
“State batching means React groups several updates that happen at the same time and refreshes the screen just once instead of many times. This keeps the app fast and the interface consistent, so users never see it flicker through half-finished changes.”
Code Example
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
function handleClick() {
// These three calls are batched into ONE re-render.
// Using the updater form so each sees the latest value.
setCount(c => c + 1)
setCount(c => c + 1)
setCount(c => c + 1)
// count is still 0 here — the new value applies on the next render.
}
return <button onClick={handleClick}>Count: {count}</button>
}
export default CounterFollow-up Questions
- What changed about batching in React 18?
- Why does count show the old value right after setCount?
- When should you use the functional updater form of setState?
- How does flushSync interact with batching?
- Is batching the same as debouncing or throttling?
MCQ Practice
1. What does React state batching primarily achieve?
Batching combines multiple state updates in the same tick so React re-renders the component only once.
2. In React 18, where does automatic batching apply?
React 18's concurrent renderer batches updates everywhere, not just inside React event handlers.
3. Which call correctly increments count three times in one batch?
The functional updater setCount(c => c + 1) sees the latest queued value, so three calls add three.
Flash Cards
What is state batching? — Grouping multiple state updates in one tick into a single re-render for performance.
What changed in React 18? — Automatic batching now applies everywhere, including promises, setTimeout, and native events.
Why is state stale after setState? — Updates are queued and applied on the next render, so the current variable still holds the old value.
How to force a synchronous update? — Wrap it in flushSync to flush the update and re-render immediately.