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!
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.
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.
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.
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.
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.
So in this handle click react will batch these two state updates into one single re-render.
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
Oldest comments (5)
Seems cool...
Thank you
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
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.
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...