React 18 — What’s New!
Everything New In React 18
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 will tell you some of the top updates and show you how to get started using React 18 alpha today. Links to everything mentioned will be below.
With React 18 there’s a new Root API. Here’s what you’re used to seeing. We pass ReactDom.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 a new way. We have a root variable that 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 differently. 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.
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.
The 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 will still be suspended until everything inside the suspense is ready to be rendered.
Using the React 18 working group repo example, 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.
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.
Some other concurrent features 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 less important updates.
And then <SuspenseList> 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