How does React batching work in React 18?

React 18 introduced significant improvements to how state updates are handled, most notably with the concept of "automatic batching." This feature enhances performance by reducing the number of re-renders, making applications faster and more efficient.

What is Batching?

Batching is a performance optimization where React groups multiple state updates into a single re-render cycle. Instead of re-rendering the component for every single setState call, React waits until all synchronous updates have been processed and then performs a single re-render. This minimizes the work React has to do, leading to a smoother user experience.

React 18's Automatic Batching

Prior to React 18, batching only occurred within browser event handlers (e.g., onClick, onChange). If you updated state inside a Promise, setTimeout, or any other asynchronous callback, each setState call would trigger a separate, immediate re-render. This often led to unnecessary re-renders and potential performance bottlenecks.

React 18 introduces automatic batching for all updates, regardless of where they originate. This means that state updates inside event handlers, promises, setTimeout calls, or any other async operations will now be batched together by default into a single re-render. This dramatically reduces the number of re-renders an application performs, leading to better overall performance and simpler code.

How it Works

React 18 essentially creates a "batching scope" around any code that schedules state updates. Once this scope exits, React collects all pending updates and commits them in a single render. This ensures that the UI updates only once, even if multiple state variables are updated asynchronously.

Benefits of Automatic Batching

• Improved Performance: Fewer re-renders mean less work for React, leading to faster component updates and a more responsive UI.
• Simpler Code: Developers no longer need to worry about manually batching updates or using workarounds for async operations.
• Easier to Reason About: State updates become more predictable, as the UI will always reflect the final state after a batch, rather than intermediate states.

Opting Out of Batching (ReactDOM.flushSync)

While automatic batching is generally beneficial, there are rare scenarios where you might need to force React to flush a state update synchronously (i.e., immediately re-render). For these cases, React 18 provides ReactDOM.flushSync.

Using flushSync forces React to perform a synchronous render and update the DOM immediately. This can be useful for tasks like measuring DOM elements directly after an update, but it should be used sparingly as it can negate the performance benefits of batching. Any updates outside of flushSync will still follow the automatic batching rules.

import { useState } from 'react';
import ReactDOM from 'react-dom';

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

  function handleClick() {
    // This block will be flushed synchronously, causing an immediate re-render
    ReactDOM.flushSync(() => {
      setCount(c => c + 1);
    });
    // This update will be batched with any subsequent updates
    // or cause a new batched render cycle if no other updates occur.
    setFlag(f => !f);
  }

  return (
    <button onClick={handleClick}>
      Count: {count}, Flag: {String(flag)}
    </button>
  );
}

Key Differences: React 17 vs. React 18 Batching

Conclusion

Automatic batching in React 18 is a fundamental improvement that makes React applications perform better out of the box without requiring developers to change their code. It standardizes the behavior of state updates, leading to a more consistent and efficient rendering cycle across the entire application.