React 18 | The Complete Guide about React v18

Type something to get started 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 that is the reason we came up with react 18 guides. Facebook itself developed and maintains the JavaScript library to make interfaces and regularly 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. If you go to its website, you will see (in the top-right corner) that the current version of React is 17.0.2 (as of writing this article in June 2021). Now they are gearing up for the next major release – version 18. Every major release is enormous for the 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 the top new things to know:

1. Automatic batching for fewer renders

In short, React will do more batching by 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 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 on large screens. It will provide visual feedback when the 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 clicking, hovering, or scrolling which need immediate attention to state updates. While Transitions are quite the opposite where a user doesn’t see 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 generate 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 18 will be some architectural improvements to React Server-Side Rendering (SSR) performance. The new API will be pipeToNodeWritable while currently, we have . 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 18:

Streaming HTML on the server. Selective Hydration on the server. 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 18 will give you a new option to wrap a part of the page with . Here’s an example:

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

When we wrap the component into , 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 all other components while the will show a spinner till it loads.

• Hydrating the page: taking the above example, lets you hydrate the app even before the comment widget has loaded. In selective hydration, the non-interactive component doesn’t show up initially, and 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 component. Starting from React 18, hydrating content inside 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 long hydration. This is a good performance improvement for low-end devices. An example: In your app, you should add 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 content. Everything else you see will hydrate as soon as the code block related to it is loaded.

Conclusion

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 quickly! If you are looking for React MUI Admin Dashboard Template then you can check out below useful Admin Template which can save you time, money, and energy: aterial UI Templates that could skyrocket your development process, then visit the page now. Good luck!