# 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**.



![gvfzzv9a79b92qzvliyi.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658483676794/hXOsOwpcd.png align="left")


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](https://cdn.hashnode.com/res/hashnode/image/upload/v1658486259232/PIIvuBL7g.png align="left")

**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](https://cdn.hashnode.com/res/hashnode/image/upload/v1658483953257/_npZEop_h.png align="left")

[https://blog.saeloun.com/2021/07/22/react-automatic-batching.html](Link)
Batching means grouping multiple state updates into a single re-render.