Hint
React 18 batches all state updates by default — even in setTimeout/fetch callbacks. Multiple setStates in one event handler produce one re-render with the final merged state.
// Simulates React 18 automatic batching
let renderCount = 0;
let state = { count: 0, name: '' };
function setState(updates) {
state = { ...state, ...updates };
}
function render() { renderCount++; }
// Batched: queue all updates, render once
function batchedUpdate(fn) {
fn(); // collect updates
render(); // single render
}
batchedUpdate(() => {
setState({ count: 1 });
setState({ count: 2 });
setState({ name: 'React' });
});
console.log(renderCount);
console.log(state.count);
console.log(state.name);1 2 React
Explanation: All three setStates run before render is called once. Final state has count=2 (last write wins) and name='React'. renderCount is 1.
Key Insight: React 18 batches all state updates by default — even in setTimeout/fetch callbacks. Multiple setStates in one event handler produce one re-render with the final merged state.