React 18 — What’s New!

Everything New In React 18

React 18 new features

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.

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.

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.

And now the 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 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.

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

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

--

--

--

Eftykhar Rahman is a full-stack web developer who is involved with coding and web development since 2018. Currently, working as a freelance developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Simple Item List Project with JavaScript DOM

Javascript Principles

Cloning of DineOut with ReactJS

Remove duplicates from sorted array in place

Remove duplicates from sorted array in place

Deploying a NestJS Application with Elastic Beanstalk

Leetcode 1446: Consecutive Characters

Leetcode 1028. Recover a Tree From Preorder Traversal

Best React Native Developer Tools for designing Exceptional Apps in 2021!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eftykhar Rahman

Eftykhar Rahman

Eftykhar Rahman is a full-stack web developer who is involved with coding and web development since 2018. Currently, working as a freelance developer.

More from Medium

Deploying a react package to NPM

Concatenated strings vs ES6 template literals in React

Props in React Js : What are props and how they work?

How to build a Circle Progress from scratch with React