React State Batch Update

React uses batching to group state updates within event handlers and inbuilt hooks. It prevents components from re-rendering for each state update and improves application performance. React 17, and prior versions only support batching for browser events.

I call two state updating functions after each other. Now we just learned that just because you call such a function does not mean that in the very next line the state was updated. State was not updated here. Instead, we just learned that the update will be scheduled and eventually the entire component will rerun. So this component in this case and then once this component rerun then we have the latest state available. Now here however, we have two state updating functions after each other. That clearly means that two state updates will be scheduled. Does this, however, also mean that the component will be re-executed, re-evaluated twice.You could imagine that this happens but that's actually not what React does here.

Screenshot (280).png

Instead, if you have two state updates in the same synchronous code snippet after each other. So not in a promise in different than blocks but in the same function, for example, where nothing in between would cause a time delay or anything like that. So if you have two synchronous lines of code after each other, where you would then call a state updating function in such cases, React will batch those state updates together in one long synchronous process, so for example, in one function that executes start to end without any callbacks or promises in between, in such cases React will take all the state updates that are produced by that function and it will batch them together into one state update. So back in this picture, even if we would not just update the new product here, but if we would update something totally different in the same function, we would still just have one scheduled state change which then however, just changes two different states. But it's one process. It's not two scheduled changes with two upcoming component, re-executions re-evaluations, but instead it's one scheduled change where all the different states you might want to effect are simply batched together. So state batching is another important concept you have to be aware of when working with react.

“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.

Batching is a React feature that combines all the state updates into a single update, causing a single re-render thereby improving the performance of the app. In earlier versions of React, batching was only done for the event handlers.

Screenshot (278).png