React State Batch Update
Changing the state and how it affects the component renders
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.
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.
The same holds for class components. Separate changes to the state within the event handler will result in a single rendering.
In which cases does batch updating works?
As mentioned, batch updating should work inside event handlers. But it actually works in other methods too.
In this example, you can see how to batch updating works within useEffect.
And here you can see that setState is called inside componentDidMount which causes only one extra update (and not three).
But it doesn’t work in every situation…
Note that this functionality does not always work. In an event handler that uses an asynchronous operation of different kinds, such as async/await, then/catch, setTimeout, fetch, etc. Separate state updates will not be batched.
In this case, on every click, instead of one render, we get three.
How to force batching?
Fortunately, we can overcome this by using ReactDOM.unstable_batchUpdate , And still benefit from state batched updates as needed.
This is how it’s done.
Although this function is supposedly “unstable”, React apparently intends to address this in the following versions.
“In future versions (probably React 17 and later), React will batch all updates by default so you won’t have to think about this”, according to Dan Abramov.
Conclusion
Working with either React hooks and class components, it is worth getting to know this cool feature, which helps us manage the state, effortlessly, and in a performant way.
I hope this post helped you to understand how you can update the state in a smarter and clearer way.
Have a great day! Thanks for reading! 🎾
