What is React batching and how does it work in React 18?

In React, batching is a performance optimization where multiple state updates are grouped together into a single re-render instead of triggering multiple re-renders.

In React 18, batching was improved to include automatic batching for all updates, not just those inside React event handlers.

What is Batching?

Normally, every state update could trigger a re-render. Batching means React collects multiple updates and processes them together in one render cycle.

This reduces:

---

Before React 18 (limited batching)

React only batched updates inside React event handlers.

Example:

👉 These are batched (single re-render)

But outside React events:

…