What is Automatic Batching in React 18

React 18 includes great features including automatic batching, which enhances rendering effectiveness and results in significant gains for programmers and users.

This article is going to explain what batching is, how it worked before in React, and how our lives have been changed by automatic batching.

What is Batching?

In the context of React, batching refers to the strategy of grouping multiple state updates before triggering a re-render of the component. This optimization is essential because each re-render can be computationally expensive, especially in complex components with a large virtual DOM tree.

Batching in React Before React 18

In earlier versions of React, batching was primarily limited to state updates that occurred within React event handlers. Consider the following code example:

Here’s a simple example:

function handleClick() {
  setCount(count + 1); // Update 1
  setIsVisible(true);  // Update 2
}

React would intelligently recognize that these updates occur within the same event handler and batch them together, resulting in a single re-render of the relevant component.

However, state updates originating outside of event handlers, such as updates within promises, timeouts, or native event listeners, would not be batched by default. Let’s illustrate this:

setTimeout(() => {
  setCount(count + 1); // Update 1
  setIsVisible(false); // Update 2
}, 1000);

In React 17 and prior, this code could potentially trigger two separate re-renders, which might become a performance bottleneck in applications with frequent asynchronous updates.

What is Automatic Batching in React 18?

React 18 fundamentally changes how React handles state updates by introducing automatic batching. The key difference is that batching now extends beyond just event handlers. In most cases, regardless of where a state update originates, React will attempt to batch it together with other pending updates.

Let’s revisit our previous timeout example:

setTimeout(() => {
  setCount(count + 1); // Update 1
  setIsVisible(false); // Update 2
}, 1000);

In React 18, these updates within the timeout will generally be batched together, ensuring that the component re-renders only once after both states have been modified.

Benefits of Automatic Batching

• Performance Optimization: By minimizing re-renders, automatic batching significantly improves UI performance, especially in complex applications with frequent state updates.
• Simplified Code: You no longer need to worry about manually wrapping state updates for batching; React handles it seamlessly.
• Enhanced User Experience: Smoother, more responsive interfaces resulting from better performance contribute directly to a more satisfying user experience.

Automatic Batching in Action

Let’s examine some common scenarios where automatic batching benefits React applications:

• Multiple State Updates Within a Handler:

function handleClick() {
  setCount(count + 1);
  setIsLoading(true);
  setIsError(false);
}

• Asynchronous Operations (Promises/setTimeout):

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    setData(data);
    setIsLoading(false);
  });

• Handling User Input: Consider form inputs where each keystroke can trigger a state update:

function handleInputChange(event) {
  setSearchTerm(event.target.value);
}

Automatic batching ensures that React doesn’t re-render excessively as the user types.

When Automatic Batching Might Not Apply

It’s important to note that while automatic batching is incredibly powerful, there might be rare instances where it doesn’t occur as expected. These often involve interactions with older libraries or code that hasn’t been fully adapted to React 18’s concurrency model.

Here is a hypothetical scenario:

// An older library with its own event system 

someOldLibrary.addEventListener('update', () => {
    setCount(count + 1); 
}); 

Updates generated from within external event systems may not always be automatically batched. If you experience such cases, consult the React documentation for guidance on ensuring optimal behavior and how you might leverage React’s `unstable_batchedUpdates` API for finer control.

Advanced Use Cases and Best Practices

While automatic batching covers most everyday situations, knowing a few additional techniques can be helpful:

• Forcing a Re-render: At times, you might need to force a re-render immediately, bypassing the batching mechanism. React provides the flushSync utility for this:

import { flushSync } from 'react-dom';

flushSync(() => {
  setCount(count + 1); 
});

Use `flushSync` judiciously, as it can negatively impact performance if overused.

• Understanding `useTransition`: React 18’s `useTransition` hook is designed for separating urgent and non-urgent updates. Urgent updates (like responding to direct user input) should proceed as normal, while non-urgent updates (like fetching secondary data) can be marked as transitions. Automatic batching works in conjunction with transitions to ensure smoother experiences.

Conclusion:

Automatic batching represents a valuable addition to React’s toolkit for building high-performance web applications. By intelligently grouping state updates, React 18 minimizes re-renders, resulting in smoother interactions, simplified code, and an enhanced user experience. As you adopt React 18, you’ll likely reap the benefits of automatic batching without requiring significant changes to your existing codebase.