Performance & Patterns

React Batching and Automatic Updates

Batching means React groups several state updates into a single re-render. Since React 18 this happens everywhere — in event handlers, promises, timeouts and native event callbacks alike.

What is Batching and Automatic Updates in React?

Batching means React groups several state updates into a single re-render. Since React 18 this happens everywhere — in event handlers, promises, timeouts and native event callbacks alike.

Batching and Automatic Updates example

Three updates, one render

JSX

function handleClick() {
  setCount(c => c + 1);
  setName('Riya');
  setOpen(true);
}
// React 18+: one re-render.
// React 17: one render inside handlers, but THREE inside a setTimeout.

Key points to remember

Automatic batching is a React 18 improvement enabled by createRoot.
flushSync forces a synchronous render when you must read the DOM immediately — use it rarely.
Batching is why state appears unchanged immediately after a setter call.

React Batching and Automatic Updates— Interview Questions & FAQs

What is automatic batching in React 18?+

React groups multiple state updates into one re-render regardless of where they happen. Before React 18 only updates inside React event handlers were batched; those in promises and timeouts each caused a separate render.