React state batch updating - reduce re-renders
By: Nitai Aharoni
Tags: JavaScript, Front End Development, Performance, React, React Native

React State Batch Update

Changing the state and how it affects the component renders

Photo by Christina Branco on Unsplash

In both hooks and class components, we have several ways to construct and alter the component’s state. We change the state by calling setState or using useState . These changes cause parts of the component to re-render, and possibly to its children.

An interesting mechanism of React, which is not mentioned much, is the state batch updating. Instead of one by one, React does batch updates, reducing the number of component renders.

In this article, we will examine how and when this happens, using examples.

Class components state

Using class components we have the component’s single state object, which we usually update using a single this.setState command. Take this for example.

Hooks state

However, when using hooks, the situation is more complex.

Using useState we have several options to construct the state of the component.

Use a single state object, and work with it just like the previous class component example.

Split the state into singular properties.

Or divide the state into several state variables related to each other.

Basically the three options

When refactoring class component into hooks…

Since the release of hooks with React 16.8, there has been a heated debate in the React community regarding their use vs the old-school class components.

When refactoring a class-based component into hook functional component, there are all sorts of things to consider, one of them is how to construct the state.

“We recommend to split state into multiple state variables based on which values tend to change together”, according to React regarding to Hooks.

Recently a co-worker asked me, how to properly migrate such class component into a hooks function component, and how to divide its new state.

My first answer, as recommended by React, was similar to the above. But actually, I did not feel comfortable with this answer.

How can we know in advance which variables tend to change together? And besides that, a future feature may force us to change them apart, and consequently build the state differently.

Finally, I suggested him, divide the state into separate individual variables.

His next and obvious question was, “When we have a state with discrete variables, we will have to change them separately and thus cause unnecessary re-renders. Wouldn’t it impair the performance of the application?”.

React batch updating

“React may batch multiple setState() calls into a single update for performance”, according to React’s documentation.

Batch updating is a React’s interesting feature, that combines state updates.

The main idea is that no matter how many setState calls you make inside a React event handler or synchronous lifecycle method, it will be batched into a single update. That is only one single re-render will eventually happen.

This functionality is relevant for both hooks and regular class components, and its purpose is to prevent unnecessary rendering.

“Currently (React 16 and earlier), only updates inside React event handlers are batched by default” , according to Dan Abramov.

Batch update example

Take a look at the next example.

A function component, which at the click of its button, changes the three individual states of the component one after the other.

On contrary to what one might think, on click, the component renders only once, although the three states change separately.

This is possible thanks to batch updating.