Just a few weeks ago, I wrote an article about what we can expect out of React 18 and its probable release date.

React 18: Release Date and What Can We Expect?
The React team at Facebook is about to release React 18 in the coming weeks. Let’s see what can we expect out of it...

The React team said it would take several weeks to prepare the official launch of the latest version. However, we got to experience the whole release shorter than we expected.

In the last week of March, the React team surprised all of us by dropping the official React 18 build. All of the features that we discussed in the last post made it to the list and are confirmed by the React team as well. Many of these features are built on top of the new concurrent renderer, which is behind-the-scenes changes that unlocks powerful new capabilities in React.

The concurrent renderer is opt-in and will only be enabled when you use the concurrent features. However, it’ll surely have a greater impact on how developers build applications. Let’s sneak peek into the React 18:

React 18 is Finally Here: Let’s Have Sneak Peek

Let’s first understand what is concurrent renderer in detail:

What is Concurrent Renderer?

Concurrency is believed to be the most important addition in React 18. This is especially true for app developers but may be complicated for library maintainers.

It’s not a new feature, but rather a behind-the-scenes change that aids React to prepare multiple versions of UI simultaneously. It’s similar to the implementation detail and is valuable because of the powerful features it unlocks.

While designing APIs, React framework hides implementation details from developers. This is because developers are focused on creating user experiences and React helps them do so. Thus, developers may not have an idea how concurrency under the hood works. Still, it’s a good idea to know how it’ll work at a high level.

Concurrency in React brings interrupted rendering. Prior to this version, updates in the React were rendered in a single, uninterrupted, and synchronous manner. Once the update starts rendering, nothing can stop it, until the user sees the result on the screen.

With Concurrency in React 18, updates can be paused in the middle and can be continued later. Also, it may abandon an ongoing render altogether. And even if the render is interrupted, the UI still appears to be consistent as guaranteed by the React team.

To do this, it first evaluates the entire tree to perform DOM mutations. This enables React to prepare a new screen in the background without blocking the main thread. What this means is UI can respond quickly to the user inputs even when it’s in the middle of rendering a heavy task.

Concurrency in React can remove sections of UI from the screen and add them later while reusing the previous state. Concurrent rendering is a powerful addition in React and most of the features are built to take advantage of it.

Gradual Adoption of Concurrent Features

When concurrent rendering is enabled, components behave differently than usual. Thus, after rigorous testing, React team reached a conclusion to enable concurrent rendering only for certain parts of the apps that use the new feature.

The gradual adoption strategy is to get React apps running on the latest v18 without code breaks. However, once upgraded to React 18, developers can start using the new concurrent features such as start transition to navigate between screens without blocking user inputs.

But for the long-term, developers need to add concurrency to the app by using a concurrent enabled library or framework. However, it may take some time for libraries to upgrade to become concurrent compatible. For the same, React has provided new APIs to make this transition easier and smoother.

Suspense in the Data Framework

React 18 supports using Suspense to fetch data in opinionated frameworks like Relay, Next.js, Hydrogen, etc. However, fetching Ad Hoc data is possible with Suspense but is not recommended practice by React.

React plans to bring additional primitives in the future to access data easier with Suspense even when not using opinionated frameworks. However, Suspense works best when integrated deeply into the app’s architecture layer, router, data layer, and server rendering environment.

So, libraries and frameworks will play a crucial role in the long-term for the React ecosystem. React’s vision with Suspense is much more than just loading code. The goal here is to extend support for Suspense so that the same declarative Suspense fallback is able to handle asynchronous operations.

These were some of the major updates about React 18. I have already talked about the rest of the features included in the React 18. Check out the below post for more details on the same.

React 18: Release Date and What Can We Expect?
The React team at Facebook is about to release React 18 in the coming weeks. Let’s see what can we expect out of it...

Still, here’s what’s new in React 18:

• Automatic Batching
• Transitions
• New Suspense Feature
• New Client and Server Rendering APIs
• New Strict Mode Behavior
• New Hooks

Learn more about how React compares against other platforms here:

React VS Angular: Why Angular is Best Tool For Enterprise Frontend Development?
React and Angular are the two most favored platforms for web application development. But which framework is best for…

Now, let’s see an upcoming feature likely to be part of the minor React 18.x release:

Server Components

Server components allow developers to build apps that span the server and client. They combine the rich interactivity of client-side apps with the improved performance of traditional server rendering.

As of this update, Server Components are not an inherent part of the Concurrent React. However, it’s designed to work best with the concurrent features of React such as Suspense and streaming server rendering.

Server components are still in the experimental stage and may be released in the upcoming minor React 18.x version. In the meantime, React is working with the other opinionated frameworks to get it ready for broad adoption.

Conclusion

React 18 promises to be better than the rest by bringing concurrency into its platform. However, it remains to see how well they have executed it and what the community thinks about concurrency in the React.