mediumFrontend

How does React's Batching work?

Q: How does React's Batching work?

**Core concept (TL;DR).** Batching means React groups **multiple state updates** that happen in the same tick into a **single re-render**, instead of re-rendering once per setState . React 18's **automatic batching** extends this beyond event handlers to updates inside promises, setTimeout , and native callbacks. flushSync opts out when you need a synchronous update. Many setState calls → one render set

905 views

Understand the problem

Explaining state updates consolidation for performance, especially in React 18.

stateperformancerendering

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Two updates, one render

import { useState, useRef } from "react";

export default function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const renders = useRef(0);
  renders.current++;                          // counts actual renders

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <p>a={a} b={b} — total renders: {renders.current}</p>
      <button onClick={() => { setA((x) => x + 1); setB((x) => x + 1); }}>
        Update both (batched → +1 render)
      </button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the Context API in React and when would you use it?

How do you test React components?