What's new in React 18?

React 18 has a lot of new features but they are all possible thanks to "concurrent rendering". It lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it introduces so many cool features to improve our apps.

Suspense

Suspense is the feature that pretty much everyone has been waiting for. We have been hearing about Suspense since a long time and it is now finally coming to React 18. Before we get into the code around Suspense we first need to talk about what Suspense does.

Imagine you have a website like this:

<Container>
  <Nav />      {/*  50ms */}
  <Sidebar />  {/* 150ms */}
  <Blog />     {/* 100ms */}
  <Comments /> {/* 200ms */}
</Container>

We have 4 components with their respective loading times. This time includes the time to fetch items from an API, render the JSX etc.

Now, when a person opens a blog article, he/she does not care about the comments, the sidebar etc, the blog is important. So, the other components can load later in the background while only the most important component i.e. the Blog is loaded.

Before Suspense there was no way to delay the loading of these components when doing server side rendering since all the HTML must be sent at once which means all the data must be loaded. With Suspense, though, you can tell React to only load the data for the important components and delay the loading of less important or slow components.

<Container>
  <Navbar />
  <Suspense fallback={Loader}>
    <Sidebar />
  </Suspense>
  <BlogArticle />
  <Suspense fallback={Loader}>
    <Comments />
  </Suspense>
</Container>

The server will send all the HTML/data for components that are not wrapped in a Suspense component. The client will then start hydrating those components as soon as it gets the HTML so that the page is usable as soon as possible. While that is happening the data inside the Suspense components will be sent down to the client in the background as soon as it is ready. The components will then begin the hydration process before finally being ready to use.

React will also prioritize hydrating components that the user is actively trying to interact with which makes your app feel even quicker for users since the parts they care about the most will load the quickest.

Automatic Render Batching

Most new React developers are confused when you have multiple setState calls one after another. This is a bit of a complicated question to answer since in React 17 it depended on where the state was set. Sometimes it would batch the updates together and do only one rerender, but other times it would re render the entire component once for each setState call. In React 18 this has been greatly simplified since now all changes to state are batched together if they are near each other.

Transition

It is very common in React to do lots of complex calculations when state changes. React 18 adds in the idea of urgent updates and transition updates. An urgent update is just like the normal React update you are used to. It is an update that happens immediately and blocks the application. Something like a button click, or selecting items from a dropdown are great use cases for urgent updates.

A transition update on the other hand is an update that is not urgent and is something a user does not expect to happen instantly. A good example of this is filtering a list of items. Most state updates you do that aren’t directly tied to interacting with an input are most likely transition updates. With React 17, though, everything is considered an urgent update since transition updates don't exist. In React 18 all updates are by default urgent unless you specifically mark them as transition updates.

import { startTransition } from 'react'

// Urgent
setInputValue(input);


// Transition
startTransition(() => {
  setSearchQuery(input)
})

Using React 18

React 18 is currently in alpha and can be downloaded like this:

npm install react@alpha react-dom@alpha

We are all used to rendering our components like so:

ReactDOM.render(<App />, document.getElementById('root'));

However, to utilize some of the new features, our components need to be rendered like this:

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

Conclusion

I am really excited to see what the full release of React 18 looks like and can't wait for the production ready version! Like the post and follow me for more content on Fullstack Web Development.