React Batching: How React Groups State Updates

Batching in React is the process of combining multiple state updates (setState) into one to minimize re-renders and improve application performance.

How Does Batching Work?

When multiple state update operations occur simultaneously, React "collects" these changes and executes them at once. Instead of re-rendering the component after each change, React performs all state updates in batch mode, then re-renders the component once.

Batching Benefits

• Performance improvement. Batching avoids unnecessary renders, reducing browser load and speeding up application work.

• Fewer DOM updates. Thanks to batching, React minimizes real DOM operations, speeding up rendering and improving user interaction.

• Better state management. Batching helps efficiently manage state by combining multiple changes into one task, making code more optimized and clean.

Batching Example

function Example() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("");

  const updateState = () => {
    setCount(count + 1);
    setMessage("Value updated");
  };

  // These two state changes will be processed in one batch
  return (
    <div>
      <p>{count}</p>
      <p>{message}</p>
      <button onClick={updateState}>Update</button>
    </div>
  );
}

In this example, despite calling two state updates (for count and message), React will execute them in one batch, resulting in one component re-render.