Batching

React groups multiple state updates that happen in the same event into a single re-render — automatically.

3 min read Level 2/5 #react#batching#performance

What you'll learn

Understand why three setters cause one re-render
Recognize that batching happens everywhere (React 18+)

When you call several state setters inside one event, React doesn’t re-render after each one. It batches them and re-renders once at the end.

What That Looks Like

function handleClick() {
  setName("Ada");
  setAge(36);
  setRole("admin");
  // ONE re-render happens after handleClick finishes, with all three values applied.
}

Without batching you’d get three re-renders. With it, you get one — faster and with no “flicker” of intermediate states.

It’s On In Async Code Too (React 18+)

Older React only batched inside event handlers. From React 18 on, batching applies in promises, timeouts, and any async callback:

async function load() {
  const data = await fetch("/api").then(r => r.json());
  setLoading(false);   // ┐
  setData(data);       // ├ batched — one re-render
  setError(null);      // ┘
}

You almost never need to think about this. Just write the setters in the order that reads cleanly.

Forcing a Render Between Setters

You almost never want this, but if you really did, an async gap (“yield to the browser”) was the historical workaround. In React 18+ even that is batched. If you genuinely need separate renders, restructure the code to not need them — a single state update with the combined value is usually the right move.

The Practical Takeaway

Call setters freely; React makes it efficient
When the next state depends on the previous, use the updater form (previous lesson)
If you’re seeing one render per setter in dev — that’s not real, it’s <StrictMode> running components twice

Up Next

You don’t need to store everything in state. Often you can derive it during render.

Derived State →