Here is Everything You Need to Know about The Upcoming React v18

Of course, we all know how popular the React library is. It has been around for years now and is used like crazy by both startups and big tech companies.

Facebook itself developed it and maintains the JavaScript library to make interfaces and on a regular basis they develop new features and write down their thoughts on what to expect in the upcoming versions. Everything that’s added or removed or updated is listed down.

If you go to its website, you will see (in the top-right corner) the current version of React is 17.0.2 (as of writing this article on June 2021). Now they are gearing up for the next major release - version 18.

Every major release is huge for developer community and in this article we will dissect the cool new features with examples. Let’s begin!

Before we start…

A quick note:

All of these updates listed are primarily aimed at maintainers of third-party libraries.
You do not need to worry about these or start implementing in your production apps just yet because it’s still in the Alpha phase and library authors are testing it.

With that out of the way, here are top new things to know:

1. Automatic batching for fewer renders

In short, React will do more batching be default, out-of-the-box. This means that you don’t need to manually batch updates in your code. But first, what is batching?

What is batching?

The ‘batching’ process starts when React starts grouping multiple updates in your state into a single re-render for better performance. This is great for performance because it avoids unnecessary re-rendering of components.

But in some cases React was not much consistent about when it handles the batch updates and by that it performs two independent updates instead of one.

What’s changing now is that earlier batch updates were during a browser event, but now it will be updating the state after the event has already been handled.

This will happen with the introduction of createRoot, by which all updates will be automatically batched, no matter where they originate from.

An example:

Suppose we have a counter app, starting from React 18 the following can be the different versions to perform the expected output no matter where the updates come from:

1. Using a function:

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
}

2. Using setTimeout():

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

3. Using fetch():

fetch(/*...*/).then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
})

4. Using an event handler:

elm.addEventListener('click', () => {
  setCount(c => c + 1);
  setFlag(f => !f);
});

2. The startTransition() API

With the introduction of this new API in React 18, your app will be kept responsive even during specific updates during large screens. It will provide visual feedback when a state changes and keeps the browser responsive.

What is a Transition?

In a nutshell, a Transition is an update of a state of an app. These updates can be of two types: Urgent and Transition.

Urgent updates include things like clicking, hovering or scrolling which need immediate attention to state updates. While Transitions are quite opposite where a user doesn’t see the immediate feedback.

An example:

Suppose we have an input search field where we need to store the value in a state so that you can do further data processing on it:

setSearchQuery(input);

It functions great on small screens but on larger ones, the updates can cause some lags when state updates while other components still rendering. Here, we can have two types of updates; one urgent one which shows what was typed immediately and the second less urgent to show the results:

// Urgent
setInputValue(input);

// Not urgent
setSearchQuery(input);

Currently, with React v.17, all updates were rendered urgently causing all the state updates to render at the same time, while blocking any further user interaction.

With the new startTransition() API, this issue can be solved by marking each of the updates as “transitions”.

import { startTransition } from 'react';

// Urgent update
setInputValue(input);

startTransition(() => {
  // Our initial state
  setSearchQuery(input);
});

3. New Suspense SSR Architecture

New to React v.18 will be some architectural improvements to React Server-Side Rendering (SSR) performance. The new API will be pipeToNodeWritable while currently we have <Suspense>.

What is SSR?

Server-side Rendering or SSR lets you generate HTML from React components on the server. One big benefit here is that the users see the page’s content before your JavaScript bundle loads and runs.

The main thing to notice is that it is an improvement where some parts of your app are slower than others.

Two new features have been unlocked from React v.18:

1. Streaming HTML on the server.
2. Selective Hydration on the client.

Let’s get to know what both of these mean one by one.

• Streaming HTML on the server: Previously, you first had to render all the HTML, then load all the JavaScript code to hydrate the entire app.

React v.18 will give you a new option to wrap a part of the page with <Suspense>. Here’s an example:

<Layout>
  <NavBar />
  <Sidebar />
  <RightPane>
    <Post />
    <Suspense fallback={<Spinner />}>
      <Comments />
    </Suspense>
  </RightPane>
</Layout>

When we wrap the <Comments /> component into <Suspense />, we tell React that it doesn’t need to wait for comments to start rendering the HTML for the rest of the webpage. So you can already interact with the all other components while the <Comments /> will show a spinner till it loads.

• Hydrating the page: taking the above example, <Suspense> lets you hydrate the app even before the comment widget has loaded. In selective hydration, the non-interactive component doesn’t show up initially, then React hydrates it after the code has finished loading.

If the app code loads earlier than the rendered HTML, React will hydrate the rest of the page. Next, when the HTML loads, it will start running the <Comments /> component.

Starting from React v.18, hydrating content inside <Suspense /> happens with tiny gaps in which the browser can handle events. By this, the event is handled immediately, and the browser doesn’t appear ‘stuck’ during a long hydration. This is a good performance improvement for low-end devices.

An example:

In your app, you should add <Suspense /> close to the root of your app:

<Layout>
  <NavBar />
  <Suspense fallback={<BigSpinner />}>
    <Suspense fallback={<SidebarGlimmer />}>
      <Sidebar />
    </Suspense>
    <RightPane>
      <Post />
      <Suspense fallback={<CommentsGlimmer />}>
        <Comments />
      </Suspense>
    </RightPane>
  </Suspense>
</Layout>

Here, the initial HTML could include the <NavBar> content. Everything else you see will hydrate as soon as the code block related to it is loaded.

The React team says all of these new updates were made possible due to a new opt-in mechanism called “concurrent rendering” which means that React prepares multiple versions of the same interface at the same time.

The great part is you will be able to adopt React 18 without rewrites and try the new features at your own pace. So, sit back, relax and let it drop soon. You will get to use these awesome new features quick!

Let me share some amazing react admin dashboard templates and website templates which might be very useful for your project.