Beginner LevelReact JS & React 19
How does automatic batching work in React 18 and 19 across async operations?
❓ Interview Prompt: Explain Automatic Batching (React 18+), state update grouping, Promises, setTimeout, and reducing re-renders.
Batching is when React groups multiple state updates into a single re-render pass for better performance:
React 18+ Automatic Batching:
•
Before React 18: Batching ONLY worked inside React event handlers. State updates inside 'fetch()' Promises, 'setTimeout', or native event handlers triggered separate re-renders for every setter!
•
React 18 & 19: Automatic Batching groups all state updates regardless of where they originate (Promises, timeouts, async functions) into a single optimized re-render!
Code Implementation Example
jsx
function AsyncBatchingExample() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
const handleClick = () => {
fetch('/api/data').then(() => {
// React 18+ automatically batches these TWO state updates into ONE single re-render!
setCount(c => c + 1);
setFlag(f => !f);
});
};
return <button onClick={handleClick}>Fetch & Update</button>;
}💡Automatic batching grouping async state updates into a single re-render pass.
🎯 Interview Key Takeaway
React 18+ automatically batches state updates across Promises and timeouts to prevent unnecessary intermediate re-renders.
#Batching#React 18#React 19#Performance#Beginner
Back to all React JS & React 19 Questions→