What’s new in React 18 and how it will help

React JS - What's new in React 18

The Facebook team has published the plan for React 18. In this article, I will be talking about the improvements and how they are going to help us during development.

So, I was just going through my Twitter stream when I saw the Twitter Space hosted by React. Now, how can you miss such an interesting discussion? And, it actually turned out to be quite an interesting one. Plus, what can be better than knowing from the core team members themselves – yes, Rick Hanlon, Rachel Nabors, Dan Abramov who are a few of the core members – were present in the space discussing the features and the reason behind them.

Let’s look at the features list and how they are useful to us.

Automatic Batching

You might have had situations where you are changing multiple state variables inside a function. Now, logically every state update will mean a component re-render, right? Well, now React groups multiple state updates into a single re-render. This means less re-renders and hence better performance. (DOM re-render is the most expensive operation on the UI, so the lesser the better.)

Let’s take an example where a component has a button which makes an Ajax call to fetch a list. Now, from React 17 and below, the code on line 9 and 10 will trigger two re-renders. In versions from React 17 and below, React waits for any browser events to batch events. However, after an event is triggered (in our case the onClick of button), React will not batch state changes that are kind of side effects to the event that just happened. However, with React 18’s automatic batching we get this performance improvement.

Star Transition (Transition API)

Another important feature on the list is a new API that can help you improve the user interactions substantially by marking specific updates as “transitions”.

Now, the question may come up – what’s this?

Imagine you have a page where you are typing something. And, that results in change in data on that page because you are filtering a list, almost like a fuzzy search.

When you are typing something in the text field we update a state variable. The list is filtered based on the new text that the user has typed. And, it results in state updates. Now, when that state is sent as props to other components as well, things can get complicated based on how child components are behaving based on the props. And hence, one keystroke can trigger multiple component re-renders, right?

With the Transition API, we can now mark certain events as less urgent or what they are calling to mark it as “transition”. So, if React is re-rendering something less urgent, and at that point if some other more urgent event happens like if a user clicks or types something, React will throw out the state rendering work that was incomplete and render only the latest update.

React 18 Working Group

Although not a feature inside React, this is a nice initiative. The React team has created a Working Group so that the community can learn what’s happening and read and participate in discussions. It’s a React github repository where features are introduced and discussed.

This is really a great step because not only users will be able to know what’s about to come as a feature but also the maintainers will have a great opportunity to get early feedback about any ideas that they have.

Also, it has great topics inside the Discussion section which provide a lot of information about the internals of how React works in certain situations.

I am quite excited about the two new APIs which React 18 is about to come up with. The team was very excited about the new features and I can already see some of the places where I will make code changes to adapt with the new features and make my components much more performant.

Do share your thoughts about what you feel about these features. You can find me on Twitter @amitavroy7 or on Discord amitavroy#5917 as well.

You may also like

Email Marketing with SendGrid

Sending mass emails effortlessly

Communicating about an offer or a contest is a great way to increase engagement on your platform. Email is a very common and effective medium for such communications.But here I am not going to talk about why sending marketing emails is good. In this article, I am going to talk about how we addressed a pain point – Sending mass email effortlessly.

Read More »
Headless ecommerce

Going Headless to Solve Custom E-Commerce Requirements with Laravel

Headless is the new buzzword that you must have come across in E-Commerece. Headless solutions have been getting quite popular because of the increase in the number of digital platforms that are used to communicate with users. Right from tiny smart bands to large plasma screens, content can be consumed in so many ways. And, each medium has its own set of unique features and challenges. Hence, a headless content source means it’s easy to decouple the content layer from the view layer.

Read More »

Cause Mapping (Part 1)

In this article, we will discuss how we created a tool to facilitate building flow charts. These charts would be required to follow certain business rules and would integrate into a host software – the application that includes this tool as a subset of its functionality.

Read More »