State Batching (React 18)

Definition

Batching is when React groups multiple state updates into a single re-render for better performance. In React 18, 'Automatic Batching' was introduced, which batches updates everywhere, including inside promises, setTimeout, and native event handlers.

Explain Like I'm New

Imagine you are making a sandwich. Instead of walking to the fridge to get bread, walking back, walking to the fridge to get cheese, walking back, and walking to the fridge to get ham (which is exhausting), you grab the bread, cheese, and ham all at once in one single trip. State batching is React doing the exact same thing to avoid redrawing the screen multiple times.

Real World Example

If a user clicks a 'Checkout' button, you might need to set `isLoading(true)` and `setError(null)` at the exact same time. React will batch these two state updates and only re-render the screen once.

Common Use Cases

•Improving performance by reducing unnecessary re-renders
•Preventing 'half-finished' UI states from appearing on screen

Interactive Example

import React, { useState } from 'react';
import { flushSync } from 'react-dom';

export default function BatchingDemo() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const handleClick = () => {
    // In React 18, this only triggers ONE re-render
    setTimeout(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
    }, 1000);
  };

  const handleFlushSync = () => {
    // Forcing synchronous, non-batched updates (triggers TWO re-renders!)
    // Rarely used, but necessary if you need to read the DOM immediately after the first state change
    flushSync(() => {
      setCount(c => c + 1);
    });
    // Component re-renders immediately here!
    
    flushSync(() => {
      setFlag(f => !f);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Batch (1 Render)</button>
      <button onClick={handleFlushSync}>FlushSync (2 Renders)</button>
    </div>
  );
}

Interview Questions

basic

What is state batching?
How did state batching change in React 18?

intermediate

How can you opt-out of automatic batching if you absolutely need to?

advanced

Why didn't React 17 batch updates inside `setTimeout` or `fetch` promises?
What is `flushSync`?

trick

If you call `setCount(c => c + 1)` three times synchronously, how many times does the component re-render?

Flash Cards

Question

How did state batching change in React 18?

Click to reveal answer

Answer

Before React 18, React only batched state updates inside React event handlers (like `onClick`). It did NOT batch updates inside `setTimeout`, promises, or native event handlers. React 18 introduced Automatic Batching, which batches updates everywhere.

Question

How can you opt-out of automatic batching?

Click to reveal answer

Answer

You can use `ReactDOM.flushSync()`. Any state updates wrapped inside `flushSync` will force React to update the DOM synchronously and immediately.

Question

If you call setCount 3 times synchronously, how many re-renders?

Click to reveal answer

Answer

Exactly ONE. React sees all three updates happen in the same event loop tick, groups them together, updates the value to 3, and then triggers a single re-render.