React 18, it's here already?!

It seems like yesterday they released React 17, I guess that’s how you feel when you’ve been working from home; time didn’t wait and neither did the React team.

React — ping me for credits of this image :-)

Let's dive into the new features that React 18 offers!

React 18 — The New Features

a) Automatic batching
We have instances where multiple states are updated on single user action. This may cause it to re-render multiple times. Auto-batching helps us to not do that and render the whole jsx once after all the states are updated corresponding to that specific user action.
Before React 18: un-batched

const handleSubmit = () => {
 setIsLoading(false) // render 1
 setFormStatus(‘success’) // render 2
 setData({name: “Yash”, mail: abc@gmail.com}) // render 3
}

As you can see in the above code these are the places where a render will be caused in the app, totalling 3 times. Now let’s see how the same code works in React 18.

const handleSubmit = () => {
  setIsLoading(false)
  setFormStatus('success')
  setData({name: "Yash", mail: abc@gmail.com}) // render 1
}

That’s it, it only renders once. This helps in performance optimization by reducing the much not needed renders.

b) Suspense on server-side render (SSR)
What is server-side rendering?
Server-side rendering is a technique for building the HTML at the server and sending it to the client while the JS bundles are loaded. It keeps the client app lightweight and makes the applications faster.

Before React 18:

UI

Let's consider the above application UI. This UI is a server-side rendered UI that is rendered in the browser. Sometimes one of the components may be slow due to some dependency, in this case, let’s assume the Main component is slow to load component.

Slowly loading component UI

When we look at it as an SSR page. One component slowing down means the whole page is gets slowed down which heavily impacts the performance of the app.

Now let us take a look at what happens when the same this is handled in React 18 with the server-side Suspense.

SSR Suspense gives us the power to show a fallback component in case the component is not fully loaded yet.

<Suspense fallback={<Loader />}>
  <Main />
</Suspense>

This suspense jsx will wait for the Main component to complete loading, until then the Loader will be shown on the page stream.

Fallback UI

Once the main component is loaded, the UI will be shown as follows.

Final UI

The stream is directly sent to the client-side. All this happens before the JS bundle is even sent to the client.

Other than these new features there are concurrent features introduced as new APIs and also for libraries. These features are still in concurrent mode. (please refer link for further information)

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

How to upgrade your existing app to React 18

The only change needed is how you create the root for mounting the react app. This change should work with most of the apps.

Step 1: Install react@18 and react-dom-18 in your project

npm install react@18 react-dom@18
OR
yarn add react@18 react-dom@18

Step 2: Make changes in the index.js entry file

import ReactDOM from 'react-dom/client'
import App from './App'
// ReactDOM.render(<App />, document.getElementById('root'))
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

Who doesn’t love Danny DeVito?!

That’s all! Your application is now using the latest React v18

As always the React team never fails to surprise. React 18 has brought us lots of performance improvements and features that help build faster and more responsive applications.

I hope you guys liked this article 😇

Connect with me

GitHub: https://github.com/yashgkar
LinkedIn: https://www.linkedin.com/in/yashgarudkar/
Twitter: https://twitter.com/codeitachi