跳到主要内容

Automatic Batching

Automatic batching = group state updates for single render

What is Batching?​

"Group multiple updates into one render"

Batching groups multiple state updates into a single re-render for better performance.

"Batching is React's optimization that groups multiple state updates into a single re-render, reducing unnecessary renders."

Automatic Batching (React 18+)​

Automatic in all event handlers

React 18+ automatically batches:

  • State updates in event handlers
  • State updates in promises
  • State updates in timeouts
  • State updates in native event handlers

"React 18 automatically batches all state updates, including those in promises, timeouts, and native event handlers."

Example: Automatic Batching​

Multiple updates = one render

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

  function handleClick() {
    setCount((c) => c + 1); // Not rendered yet
    setFlag((f) => !f); // Not rendered yet
    // React batches - only one render
  }

  // Renders once after both updates
}

"React 18 automatically batches multiple state updates, causing only one re-render instead of multiple."

Before React 18​

Only batched in event handlers

// React 17 - only batched in event handlers
function handleClick() {
  setCount((c) => c + 1); // Batched
  setFlag((f) => !f); // Batched
}

// React 17 - NOT batched
setTimeout(() => {
  setCount((c) => c + 1); // Separate render
  setFlag((f) => !f); // Separate render
}, 1000);

"React 17 only batched updates in React event handlers, not in promises, timeouts, or native handlers."

React 18 Improvement​

Batches everywhere

// React 18 - batched everywhere
setTimeout(() => {
  setCount((c) => c + 1); // Batched
  setFlag((f) => !f); // Batched
  // One render
}, 1000);

fetch("/api").then(() => {
  setCount((c) => c + 1); // Batched
  setFlag((f) => !f); // Batched
  // One render
});

"React 18 batches updates in all scenarios - event handlers, promises, timeouts, and native handlers."

Benefits​

Performance · Fewer renders

  • Better performance: Fewer renders
  • Smoother UI: Less flickering
  • Automatic: No code changes needed
  • Works everywhere: All update scenarios

"Automatic batching improves performance by reducing renders, resulting in smoother UI without code changes."

Opting Out​

flushSync for immediate render

import { flushSync } from "react-dom";

function handleClick() {
  flushSync(() => {
    setCount((c) => c + 1); // Immediate render
  });
  setFlag((f) => !f); // Separate render
}

Rarely needed.

"Use flushSync to opt out of batching and force immediate render, though rarely needed."

Function Updates​

Function updates always work

// Both work with batching
setCount(count + 1);
setCount((c) => c + 1); // Preferred for batching

Function updates are safer with batching.

"Function updates (c => c + 1) work correctly with batching, preferred over direct value updates."

9️⃣ Best Practices​

✅ Let React batch automatically ✅ Use function updates when needed ✅ Don't worry about batching ✅ Use flushSync only if necessary ❌ Don't try to manually batch ❌ Don't use flushSync unnecessarily

"Automatic batching groups multiple state updates into a single re-render. React 18 automatically batches all updates - in event handlers, promises, timeouts, and native handlers. This improves performance by reducing renders. React 17 only batched in React event handlers. Use flushSync to opt out if needed, though rarely necessary."

🧠 Ultra-Short Cheat Sheet​

Groups updates into one render
React 18 = automatic everywhere
React 17 = only event handlers
Better performance
Fewer renders
flushSync to opt out
Function updates preferred