Automatic Batching In React
React team announced new changes in batching. this new change on batching can become the savior for React developers because this new change will remove unnecessary rendering and this feature will be integrated automatically means developers don’t need to call any React APIs. batching was already there on previous versions but it was only in events APIs (onClick,onChange) not in other browsers APIs (setTimeout,setInterval, fetch). before directly jumping into advanced concepts of automatic batching. let’s start from the basics
What Heck is Batching?
Whenever you change the state in React. it re-render everything this re-rendering process is very heavy process because it creates a whole DOM tree then React uses some algorithms to find out the difference and finally, it will make changes on real DOM. let’s understand from the example
As you can see from the above image that rendering is happening only one time but if you see the “changeText” function 2 state is getting changed.so, it should re-render 2 times but here it is only rendering 1 time. this is called batching . in short, React is resisting rendering until the function “changeText” is not executed or you can say it is removed from the call stack. this is called batching
Why We Need Batching?
We need batching because it removes unnecessary renders imagine working with giant tables or complex UI which is changing whenever the state is changing it can cause performance issues and re-rendering is not a small process it becomes a heavy process when your UI is complex and because React setState is asynchronous. so, it might cause some bugs because it will update one value but not other value. React handles batching automatically but the problem is it will not handle batching when the state is updated after some async operations like fetching data or in callbacks of setTimeout, setInterval
An example of automatic batching is not working in the async, setTimeout, set interval operation is shown below
As you can see from the above image, every time rendering is happening, whenever the state is changing. this same behavior is found in callbacks of setTimeout, setInterval browsers APIs
Automatic Batching In React 18
Automatic batching does not exist in async,setTimeout,setInterval callbacks to solve this problem React team announced a new API “ReactDOM.createRoot” which automatically takes care of batching in browser APIs. “ReactDOM.createRoot” is an alternative of “ReactDOM.render”. an example is shown below
Notice that in the “then” callback two state is changing but only 1 time rendering is happening and the same behavior will be found when the “clickTimeOut” function is called. but still “createRoot” API is in the experimental stage
Resisting automatic Batching
In React 18, batching will become by default for all APIs when you use “createRoot” but Sometimes states changes depend on reading other states immediately after a state change. due to automatic batching, it will become impossible to change state which is dependent on other changes to remove automatic batching for certain cases ReactDOM API “flushSync” can be used but “flushSync” will start re-rendering when state will change
Conclusion
In React 18, there will be changes in automatic batching which will remove unnecessary rendering. ReactDOM API “createRoot” is used for automatic batching and to resist the batching ReactDOM API “flushSync” can be used. this change will not be going to break anything. check out PR for automatic batching in React
