What`s new in React v18
Tags: bitlogix, reactjstutorials, react18, react
Published: 2022-04-28 21:56:50

---
title: What`s new in React v18
published: true
date: 2022-04-07 17:39:26 UTC
tags: bitlogix,reactjstutorials,react18,reactjs
canonical_url: 
---

All you have to know about React18

![](https://cdn-images-1.medium.com/max/392/1*4cbNCCbjAEa3L0SNERpSyA.png)

#### An Introduction to React

> Do you work as a web developer?  
> If you answered yes, you should be aware that React.js is an open-source JavaScript library for creating user interfaces for single-page applications.

#### REACT V18.0

React v18.0 is a crucial new version of React released on March 8, 2022. It has numerous galvanic features and updates for the React.js development community. The great news is that it doesn’t break your existing code. So, what you learned still applies as well. You still write code the same way as before.

#### What’s New?

React 18 new features and refinements are possible thanks to the latest opt-in “concurrent rendering” mechanism in React 18 that enables React to create multiple versions of the UI at the same time. Though this change is mostly behind the scenes, it will unlock new possibilities to improve the app performance. — React document

![](https://cdn-images-1.medium.com/max/486/1*jvd3dozUqyTlSIWcxz0-dA.png)
_Screenshot from React 18 Keynote slides._

So, let’s talk about React 18 latest features and updates.

#### _Concurrency_

The most crucial addition in React 18 is concurrency. I think this is basically true for developers, though the story may be a bit more complicated for library maintainers.

> _Concurrency is not a feature, per se. It’s a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it’s valuable because of the features that it unlocks. — React document_

#### In other words:

> **_“_** _The latest concept & set of features (plus APIs) that support with state update categorization urgent state updates can be categorized over minor urgent, long taking obstructing updates_ **_”_**

Concurrency is all about processing various simultaneous state updates.

React uses a heuristic to decide how “urgent” an update is, and lets you adjust it with a few lines of code so that you can achieve the desired user experience for every interaction.

### New APIs

Now, you can enumerate react about state update that has lesser priority by using one of the new APIs introduced with React 18.

![](https://cdn-images-1.medium.com/max/608/1*PeQXCsbwa95LwHir1ZGpiQ.png)

#### useTransition() & StartTransition() Hook

By default, all updates in React are considered urgent. That could create a complication when prompt updates are slowed down by dense updates.

However, starting React 18 and the new concurrency features, you can spot some updates as disreputable and non-urgent — so-called transitions. That’s basically useful with dense UI updates, like filtering bragging lists.

![](https://cdn-images-1.medium.com/max/606/1*TzKI4ZxjpuOqmP5qmxHfhw.png)

> Wrap a state update with **startTransition()** to let React know that is possibly managed with lower priority.

![](https://cdn-images-1.medium.com/max/501/1*lCQnb9L1PsxX74WdGYf5xQ.png)

#### State Update Batching

Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, **_setTimeout_** , native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically.

#### Suspense in Data Frameworks

> _Suspense is not a data fetching library. It’s a mechanism for data fetching libraries to communicate to React that the data a component is reading is not ready yet. React can then wait for it to be ready and update the UI. — React document_

#### What is Suspense?

It is a lower-level engine API that can be used to pause a component’s accomplishment. How is that done? In a nutshell, it all boils down to a component throwing a Promise that is deflected by the engine. It will defer the execution of that component’s tree until the Promise is resolved or rejected.

![](https://cdn-images-1.medium.com/max/454/1*cAK4WgFiAxKPZ793dOrEUA.png)
_Suspense component_

Lazy loading exclusively means that you implement code splitting to only load code for an irrefutable component when needed. It can help with performance since less code has to be downloaded initially. This is often used in combination with routing. For example, you already used a suspend component to show a fallback component, for example, a loading spinner until the code for the lazily loaded component was downloaded. However, before React 18, you couldn’t use the suspense component if you also used server-side rendering. Now, of course, many apps might not use that, but if you did use it, you would not be able to use the suspense component because it would cause an error. But React 18 enables Suspense for SSR. In addition, Suspense will also be usable for general data fetching (not just code splitting) in the future.

#### New Client and Server Rendering APIs

In the latest release of React 18, They redesign APIs and expose them for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18.

#### React DOM Client

As they said latest APIs are now exported from react-dom/client:  
**_createRoot_** is a New method to create a root to render or unmount. And used instead of **_ReactDOM.render_**.

**hydrateRoot** is a new method as well to hydrate a server-rendered application. Which is used instead of ReactDOM.hydrate in conjunction with the new React DOM Server APIs.

> Note: New features in React 18 don’t work without it.

createRoot and hydrateRoot both accept a new option called **onRecoverableError** in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use reportError, or console.error in the older browsers.

React DOM Server

These APIs are now exported from react-dom/server as well as react-dom/client and have full support for streaming Suspense on the server:  
**renderToPipeableStream** is used for streaming in Node environments.  
**renderToReadableStream** is used for modern edge runtime environments, such as Deno and Cloudflare workers.  
According to ReactDocs.  
The existing **renderToString** method keeps working but is discouraged.

#### How to Update?

Updating React 18 indeed is a piece of cake. Or you can say Updating is dreadfully easy and requires almost no work. You don’t need to re-learn React and don’t need to change your entire codebase. Installation instructions are the same.  
All you have to do is to run:

1. To install the latest version of React:

![](https://cdn-images-1.medium.com/max/510/1*ufIRSk5d9jOcYjS2b6XC_g.png)
_Install/Upgrade using NPM_

![](https://cdn-images-1.medium.com/max/491/1*HSa9zD5ud0jNl_04buVi8w.png)
_Install/Upgrade using YARN_

2. After running that there’s one single change you have to make to your code base is that to take benefits of new features which unlocked and added by React 18 you have to go to your root entry file. Typically, index.js.

In index.js file replace the import of React DOM from React DOM

![](https://cdn-images-1.medium.com/max/624/1*uSzSV3UpLs3cbE5yh6XvSQ.png)
_index.js_

That’s all no other change is required. As I said before what you learned still applies as well you still write code the same way as you are before.

* * *