What is batching in React?

Batching in React is a crucial performance optimization technique where React groups multiple state updates into a single re-render cycle, thereby preventing unnecessary re-renders and improving overall application performance and responsiveness.

What is Batching?

Batching refers to the process by which React groups several state updates (e.g., calls to setState or useState's setter function) that occur within the same event loop cycle into a single, unified re-render. Instead of re-rendering the component for each individual state update, React intelligently waits for all pending updates to be processed and then performs just one re-render.

Why is Batching Important?

The primary benefit of batching is a significant performance improvement. Re-rendering components can be a CPU-intensive operation. Without batching, a component that makes multiple separate state updates might trigger a re-render for each update. This could lead to visual flickering, wasted computation, and a slower, less responsive user interface. Batching ensures that the UI updates only once, after all relevant state changes have been processed, resulting in a smoother and more efficient application experience.

How Batching Works (React 18+)

In React 17 and earlier, batching only occurred automatically within React event handlers. This meant that state updates happening outside of event handlers (e.g., inside promises, setTimeout, native event handlers, or custom event callbacks) would each cause an immediate, separate re-render.

With React 18, a major enhancement was introduced: automatic batching for *all* updates, regardless of where they originate. This means state updates inside setTimeout, promises, native event handlers, or any other asynchronous code will now be batched into a single render by default. This significantly simplifies state management and further boosts performance.

In very rare scenarios where you might need to force React to flush a state update immediately (i.e., opt-out of batching for a specific update), you can use ReactDOM.flushSync. However, this is generally not recommended as it can negatively impact performance and should be used with caution.

Example Scenario

Consider a situation where an event handler (e.g., an onClick handler for a button) updates two different pieces of state using setCount(c => c + 1) and setFlag(f => !f).

Without Batching (React 17 and below, outside event handlers): Each setState call would typically trigger a separate re-render. In this case, the component would re-render twice.

With Batching (React 18+, or React 17 within event handlers): Both setCount and setFlag calls would be batched. React would process both updates internally and then trigger a single re-render of the component, reflecting both state changes simultaneously in the UI.

Code Example

In the following example, clicking the button will trigger two separate state updates (count and flag). Due to automatic batching in React 18, the MyComponent will only re-render once for both changes.

import React, { useState } from 'react';

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

  // This console.log will only fire once per click in React 18 due to batching.
  console.log('Component re-rendered'); 

  function handleClick() {
    setCount(c => c + 1); // First state update
    setFlag(f => !f);     // Second state update
    // Both updates are batched into a single re-render by React
  }

  return (
    <div>
      <p>Count: {count}</p>
      <p>Flag: {flag.toString()}</p>
      <button onClick={handleClick}>
        Update State (Batched)
      </button>
    </div>
  );
}

export default MyComponent;

Key Takeaways

• Batching groups multiple state updates into a single re-render cycle.
• It's a critical performance optimization that prevents excessive component re-renders.
• React 18 introduced automatic batching for all updates, regardless of their origin (e.g., event handlers, promises, setTimeout).
• This leads to a significantly more efficient and responsive user interface by reducing unnecessary work React has to do.