React 18 is here! What’s new!

Logo of React

React Core Team released an alpha version of React18 recently. This release is more focused on User Experience and internal architecture changes, including adaptation to concurrent features Recent blog post.

We can install React 18 right away using:

And ReactDOM:

What’s new?

1. startTransition API :

This is a new API introduced with this release, which helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates at the same time.

One important use case for startTransition could be when a user starts typing in a search box. The input value has to be immediately updated while the search results could wait few milliseconds(as expected by the user).This API provides a way to differentiate between quick updates and delayed updates.

For urgent updates like typing, hover, clicking, we call props/functions usually like this :

For non-urgent or heavy UI updates, we can wrap it in a startTransition API as :

2. The New Root API :

We usually create a Root level DOM level like his and append the React App.

This has now been deprecated and is now called Legacy Root API

Instead, a new Root API is introduced in React18, which looks like this :

Using New Root API over Legacy Root API :

There are quite a few improvements :

a. Easy to use hydrate function as we can pass an optional boolean value directly to the root.

Legacy Root API :

New Root API :

b. Improvements in render callback :

In Legacy Root API, we could pass a render callback function. This is an anonymous function that renders/runs after the root component has been mounted.

3. Automatic Batching:

Starting with performance, we’ve got huge improvements to automatic batching.

Before React 18, React already batched (aka grouped) multiple state updates into one to reduce unnecessary re-renders. However, it happened only in DOM event handlers, so Promises, timeouts, or other handlers didn’t take advantage of that.

For example, if you have two state updates inside of the same click event, React has always batched these into one re-render. If you run the following code, you’ll see that every time you click, React only performs a single render although you set the state twice:

In automatic batching (after upgrading to React 18), no matter from where the states are originating, it will always be re-rendered once.

4. Suspense List :

A <SuspenseList /> takes in revealOrder prop with values forward, backward, or together

Here the card component will be revealed in a forward direction(until the data is fetched, will fell back to LoadingSpinner Component). Similarly, backwards will reveal Cards in reverse order, and together prop will render everything "together".

Wrapping Up

React18 has been mostly about concurrent features rather than a full-blown concurrent mode (which has been hyped a lot from React16) reason being the application and libraries author can have a smooth transition and not any breaking changes GitHub Discussions.

React18 is an alpha release right now and not suitable for production shipping so APIs might evolve until it reaches a stable release by the end of this year(expected).

Thank you for reading. Signing off. 🙌

Feel free to reach out. 👇

GitHub: https://github.com/aritrochakraborty29
Twitter: https://twitter.com/Aritrocool29
LinkedIn: https://www.linkedin.com/in/aritro-chakraborty-2283b616a/