What is batching?

ReactJunior~2 min read

What is batching in simple words

Batching (grouping) is a React mechanism in which several state updates triggered almost at the same time are combined into one shared render.

The goal is to avoid unnecessary re-renders and improve the application's performance.

Example without batching (if it did not exist)

javascript

setCount(count + 1);
setText("Hello");
setIsOpen(true);

Without batching React would take three steps:

Changed count -> re-render
Changed text -> re-render
Changed isOpen -> re-render

Total: 3 re-renders in a row, which is very inefficient.

Example with batching (what React actually does)

React "accumulates" all setState calls while a single event is being handled (for example onClick, onChange, etc.), and once it finishes it updates all states in one go and does a single render:

javascript

function Example() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const handleClick = () => {
    setCount(c => c + 1);
    setText("Updated");
  };

  console.log("Re-render!");
  return <button onClick={handleClick}>Click</button>;
}

On a click React will call console.log("Re-render!") only once, because the updates are grouped (batched).

How it works under the hood

When you call setState():

React adds the update to the component's internal queue (updateQueue).
It marks the component as "needing a re-render".
But the actual re-render does not run immediately - it waits until:

the event handler finishes,
the microtask finishes (if the updates came from a Promise, setTimeout, etc. in React 18+).

After that React applies all the updates in one pass and renders once.

Important: batching comes in different levels

React < 18 (the old behavior)

Batching worked only inside React's synchronous events:

javascript

onClick, onChange, onSubmit, ...

But if an update happened inside setTimeout or a Promise, React did not group them:

javascript

setTimeout(() => {
  setCount(c => c + 1);
  setCount(c => c + 1);
}, 0);

// React 17 -> will be 2 re-renders
// React 18 -> will be 1 re-render

React 18 and "automatic batching"

Starting with React 18 batching is enabled in every context:

inside setTimeout
inside fetch
inside async/await
inside promises and effects

Now all state updates that happen within one event or task are combined automatically.

What React actually does during batching

You can picture it like this:

javascript

const updates = [];

function setState(updateFn) {
  updates.push(updateFn);
  scheduleRender(); // React waits for the current phase to end
}

function scheduleRender() {
  // after the event / microtask finishes
  applyAllUpdates(); // applies all updates at once
}

Summary

What	Description
Definition	A mechanism that combines several state updates into one render
Why	To avoid unnecessary re-renders and speed up the interface
Where it kicks in	In React 18+ - everywhere (events, timers, async)
How many re-renders for 5 `setState` in a row	Just 1
How it works	React accumulates updates and applies them as one batch

Example for clarity

javascript

function BatchingDemo() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  const handleClick = () => {
    setA(x => x + 1);
    setB(x => x + 1);
    console.log("Button clicked!");
  };

  console.log("Re-render!");
  return <button onClick={handleClick}>Click</button>;
}

On a single click you will see:

javascript
Button clicked! Re-render!

(only 1 re-render)

Without batching (if this were React 16): there would be 2 re-renders in a row

Key point

Batching is "combining state updates into one render".

Thanks to this, React stays fast even if a single event calls a dozen setState() in a row.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.