React 18: What’s changed? [Automatic Batching]

Since it’s initial release back on May 29, 2013, React has gone from strength to strength, finding new and exciting ways to shake up the Front-End world. Most developers can certainly agree that React has revolutionised the way in which we create and implement user-friendly interfaces. Certainly If you are a React developer, then there is no doubt that you’ve heard about React 18.

Obviously there is still a lot more information yet to be released, but in this series of posts we are going to take a quick 1 minute dive into some of the latest and greatest features that React 18 has to offer us.

Automatic Batching

A revolutionary new feature that React 18 is set to offer us is automatic batching. If you haven’t already heard of batching in React, it is what happens whenever multiple state updates are combined into a single re-render. If you’re calling multiple state updates in a different context such as a callback, a promise or a timeout, React won’t batch these two updates into one and you’ll get two re-renders when you probably only needed one. With automatic batching the plan is for state updates to be batched automatically by default, regardless of the context. You will still have the option of not batching your updates, but you will need to use flushSync to re-render your component every time it has finished running the function. As flushSync actually forces the complete re-rendering for updates that happen inside of a call, you should use it very sparingly.

In the next post we are going to take a look at Transitions!