DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for React 18 - What's New!
Eftykhar Rahman
Eftykhar Rahman

Posted on

React 18 - What's New!

React 17 was a bit of a bore for developers. There really wasn't a lot added but it's definitely not the case with react 18. In this article I am going to tell you some of the top updates and I'll show you how to get started using react 18 alpha today. Links to everything mentioned will be in the below.

With React 18 there's a new Root API. Here's what you're used to seeing. We pass react dom.render our app component and then document.getElementById and our root element. So we're rendering our app component into our root element on the page. Pretty Simple!

Image 1

Here's the new way. We have a root variable which is equal to a new method called create root. This is being passed our root element and then we call root.render and pass our app component.

Image 2

It's accomplishing the same thing but in a different way. The old way is now called the Legacy Root API and It's still going to work in React 18 but will be deprecated at some point by using the new Root API. You're going to get access to all of the React 18 improvements including the concurrent features that we're going to talk about in this article.

Suspense

The suspense is finally over in this update we're going to get full support for suspense. Now what is suspense? As the name implies it suspends something until it's ready to be rendered.

In this example, we have a component that needs time to fetch data before it's ready to be rendered.

Image 3

Suspense will use the fallback until the data is returned and the components are rendered. It's important to note here that the random component here is not waiting on data but it's still going to be suspended until everything inside the suspense is ready to be rendered. And now suspense is going to be extremely useful with SSR or Server Side Rendering. Currently, with SSR you're going to get fully rendered HTML but your browser still has to load the JavaScript and hydrate the entire page before it can become interactive. Suspense could speed up this load time dramatically.

Using the example from the React 18 working group repo here we have a page loading a navbar, a sidebar, a post and a comment.

Image 4

Now we really don't need the comments to load before the site becomes interactive. So we're going to suspend the comments. So that the viewer can start reading the article
and then we'll load the comments in the background.

Another cool thing about suspense is selective hydration.

Image 5

In this example., we're suspending the sidebar and the comments. Hydration will begin on the first suspended component in the tree. So the sidebar will hydrate first but if the user tries to interact with the comments section, React will prioritize hydrating the comments instead of the sidebar.

Automatic Batching

In React 17 and earlier react with batch re-render updates during a browser event like a click. Here's an example from the docs.

Image 6

So in this handle click react will batch these two state updates into one single re-render.

Image 7

But if you need to fetch data and then update the state these re-renders will not be batched.

With react 18, If you're using the new Create Root API, all state updates will automatically be batched no matter when they happen. If you do have a critical component that you don't want to be batched. You can opt out of this by using reactdom.flushsync.

Concurrent Features

There's some other concurrent features that are interesting but I haven't fully dug into them yet. One is startTransition. This will tell React which updates are urgent and which can wait this will help the UI remain responsive.

Then there's useDeferredValue. This allows you to defer updates that are less important.

And then This coordinates the order of loading indicators.

Obviously don't use React 18 in production yet. It's just an alpha status but start learning about these new features now. React 18 will go into public beta in a few months and then several weeks after that so get ready. It's really exciting.

React 18 Resources Mentioned:
The Plan for React 18 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
React 18 Working Group - https://github.com/reactwg/react-18
React 18 Discussions - https://github.com/reactwg/react-18/discussions

Top comments (5)

Collapse
 
ngduc profile image
Duc Ng

Great news.
Can't wait to work with the final version 18.
I've just played around with React 18, Typescript, Vite and Vercel, wrote about it here:
nnote.io/s/x4od5/try-react-18-with...

Collapse
 
maswerdna profile image
Samson Andrew

I just took my first dive into the world of React a couple of days ago and I must confess it's a wonderful experience.

With my experience in software engineering, I would say that Suspense is going to be a ground breaking feature. I can't wait to start using it.

Collapse
 
cleveroscar profile image
Oscar Ortiz

Thanks for the updates! Suspense sounds like it’s going to be very helpful in performance, especially with those that don’t have a lot of bandwidth

Collapse
 
said_mounaim profile image
Said Mounaim

Thank you

Collapse
 
freakcdev297 profile image
FreakCdev

Seems cool...

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!