Suggest an editImprove this articleRefine the answer for “What is batching (Automatic Batching)?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Batching** is a mechanism where **React groups several state updates (setState / useState)** into **a single render**, to **reduce the number of re-renders** and improve performance. **Key point:** before React 18, batching only worked inside synchronous React event handlers; in React 18 it became automatic in every context, including `setTimeout`, promises, and async/await.Shown above the full answer for quick recall.Answer (EN)Image## What batching is **Batching** is a mechanism where **React groups several state updates (setState / useState)** into **a single render**, to **reduce the number of re-renders** and improve performance. --- ## Before React 18 (legacy batching) Previously (before React 18) React could only group (batch) updates **inside synchronous React event handlers**. For example: ```javascript function handleClick() { setCount(c => c + 1); setFlag(f => !f); } ``` React performs **a single render**, because both `setState` calls are inside **one React event (onClick)**. But here is what happened **in async contexts**: ```javascript setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); }, 1000); ``` React 17 and below performed **two separate renders**, because batching **did not work** outside React events. --- ## React 18: Automatic Batching In **React 18**, batching became **automatic in every context** - even inside `setTimeout`, promises, async/await, fetch, effects, and so on. The same code now works more efficiently: ```javascript setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); }, 1000); ``` **React 18** performs **only one render**, since both updates are automatically combined into one batch. --- ## What happens under the hood When `setState()` (or a `useState` update) is called: - React **does not update the DOM immediately**; - it **collects all the changes** that happen "within one cycle"; - then it performs **a single shared render** and updates the DOM all at once. In other words: ```javascript setState() → (React queues it) setState() → (React queues it) --- batch complete --- → one render and commit ``` --- ## Comparison example ### Without batching (React 17) ```javascript setCount(c => c + 1); // render #1 setFlag(f => !f); // render #2 ``` Two separate re-renders → more overhead and UI flickering. --- ### With batching (React 18) ```javascript setCount(c => c + 1); setFlag(f => !f); // React combines them → one render ``` One render → faster and smoother. --- ## When batching does not happen Sometimes you need to update the DOM *immediately*, bypassing batching - for example, to instantly see an effect before the next updates. There is an API for this: ```javascript import { flushSync } from "react-dom"; flushSync(() => { setCount(c => c + 1); }); // React will perform the update immediately (without batching) ``` --- ## Key advantages of Automatic Batching | Advantage | Description | |---|---| | Fewer re-renders | Updates are grouped → less overhead on the virtual and real DOM | | A smoother interface | React is not blocked by many small updates | | Less code for optimization | You do not need to manually "combine" setState calls | | Works everywhere | Even in `setTimeout`, promises, async functions, `fetch`, and so on | --- ## Summary > **Automatic Batching** is the automatic combining of several `setState()` calls > into one render, **regardless of context**, to improve performance and the smoothness of the interface.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.