New Updates and Features in React v18.0

The newest version of React, React v18.0 released in March 2022. Needless to say, it is packed with quite a few exciting new features. New versions of React always create a stir, and this one is no exception. The leading frontend library is loved for its constant strive towards improvement and innovation. The latest version of React is mainly concentrated on performance improvement. There is also a significant focus on updating the rendering engine.

Without any further ado, let us delve straight into the details of all the new features in React v18.0.

What’s New in React 18?

React 18 is loaded with a lot of new updates based on the new features and general improvements to rendering models. React Labs has been cooking up some game-changing improvements in the library. Some of the most exciting features have been released in React v18.0.

Concurrent React and Suspense are the most exciting among these. We would talk about both of these features in detail. We will also discuss Server Components in this segment, although it is still in development. It is undergoing minor tweaking to enable its greater adoption. Automatic Batching and Transitions are the biggest updates of this version. There are also some integrational updates to Concurrent and Suspense. Several new hooks are also added to ease adoption.

Concurrent React

Concurrency is the capacity to render many programs, or many components of a program parallelly. React v18.0 aims to completely shift how we deal with concurrency by introducing Concurrent React.

The React Team refuses to call Concurrent React an update. They are calling it an implementation detail that makes way for newer updates. As a frontend developer, you probably are not too concerned about implementation details. You are likely more concerned about ‘what’ goes into your UI, not ‘how’. It is still relevant to discuss here, as Concurrent React is nothing short of a foundational update to the core rendering model of React.

The key attribute of Concurrent React is it makes rendering interruptible. This implies that while rendering an update, React can now begin, pause, and then resume. It might even completely forego working on a render that was in progress. Even if a render stops, React promises that the user interface will still look consistent.

This is accomplished by delaying DOM modifications until after assessing the entire tree. So, React can now create new screens in the background without interrupting the main thread. It improves the UI by allowing it to react to user input even when it is engaged in a rendering operation. Concurrent React also allows removing UI elements from the display and adding them later when reusing the earlier state.

The primary focus now is on a subtle transition of older react features to work seamlessly with Concurrent. There is enough space for us to gradually enable Concurrent into our programs. You can use <StrictMode> to selectively enable Concurrent on specific components of your program.

Suspense can fetch data in opinionated frameworks like Next.js Relay, Remix, or Hydrogen with React v18.0. Though it is not advisable to use Suspense for global data-fetching already, even if it is technically possible.

Upcoming releases of Suspense are speculated to include more primitives that would make it simpler to access your data without the need for an opinionated framework. Suspense performs well when integrated with the main structure of your code. Especially, your data layer, router, and server rendering environment. Thus, even in the long haul, we can expect that other frameworks will be essential components of the React ecosystem.

Suspense can also perform for code splitting on older versions of React with React.lazy. But, the goal is to extend Suspense to manage all asynchronous operations like loading code, data, and images.

Server Components

As I already mentioned, Server Components have not been released yet. But, it will be released very soon as a subversion of React 18. Server Components would enable developers to create apps that run on both the server and the client.

How would it make that possible? Server Components can integrate the rich interactivity of client-side applications with the enhanced efficiency of conventional server rendering. We can also expect that Server Components would function well with Concurrent features such as streaming server rendering.

React performs batching to enhance the performance of the code. What is batching? Batching refers to grouping several state updates into one re-render in React event handlers. In React 18, the new batching update does automatic batching. Event updates inside setTimeout, promises and native event handles can now be batched automatically.

Transitions

As we know, updates are of two types, urgent and non-urgent. Urgent updates involve direct interaction between your user and UI. Non-urgent updates include moving from one UI view to another.

The newly added Transitions feature in React 18 treats non-urgent updates at transitions. These are rendered in an interrupted manner.

We can use the API startTransition to distinguish between urgent and non-urgent updates. React would treat startTransition updates as non-urgent. It will interrupt these updates when an urgent update comes in. Upon such interruptions, React would discard older renders and only render the latest update. We can use two hooks for transitions:

• useTransition: for starting transitions, including values that track pending states.

• startTransition: for starting transitions when the useTransition hook is unavailable.
  

Transitions are possible due to concurrent rendering as it allows interruption of updates. In the case of re-suspension of an update, the current content would be displayed to the user. Meanwhile, Transition would render the transition update in the background.

New Suspense Features

Suspense is now supported on the server, with increased capabilities through concurrent rendering features. If a section of the component tree is not quite ready to be rendered, Suspense allows you to declaratively describe the loading state for that part. Suspense makes the "UI loading state" an out-of-the-box declarative concept in the React programming model. We can look forward to creating more advanced features based on it.

The transition API needs to be used in conjunction with suspense in React 18. React will not replace rendered content with fallback content if you suspend it during a transition. Instead, it will postpone rendering until enough data has loaded. This would avoid an undesirable loading state.

React 18 comes with an exported set of redesigned client and server rendering APIs. These came into play to help with a gradual upgrade from React 17 to React 18.

React DOM Client

Two APIs are exported in React 18 from react-dom/client - createRoot and hydrateRoot. The added features in React 18 would not work if these are not used. Both of these APIs can accept onRecoverableError. This is a new option that notifies developers as React recovers from any error during a render or logging hydration. In older browsers, React would use reportError and console.error as a default.

• createRoot -used in place of ReactDOM.render to create a new root to unmount or render.
• hydrateRoot -this is in place of ReactDOM.hydrate to hydrate server-rendered apps with the new DOM Server APIs.

React DOM Server

New APIs are designed from the present APIs of react-dom/server. They support Suspense on the server end. Although renderToString still works on React 18, it is advisable to not use it.

• renderToPipeableStream: streams in Node environments.
• renderToReadableStream: streams in modern edge runtime environments like Cloudflare workers and Deno.
  

New Strict Mode Behaviors

The addition of the capability to enable React to add and remove UI elements while maintaining the state is underway. React should be able to display the previous screen in an instant. Let us say when a user tabs back and forth between screens, for example. React would unmount and remount trees to perform this, utilizing the component state as before. React apps will function faster banking on this capability. But, components must be resilient to effects being mounted and deleted repeatedly. Most effects will function as intended. Others may presume to be mounted or destroyed once.

React 18 adds a new development-only check to Strict Mode to assist identify these problems. Every time a component mounts for the first time, this new check will automatically unmount and remount each component, reinstating the previous state on the next mount.

The Strict Mode simulates unmounting and remounting the component when in development mode.

New Hooks

Several new hooks are introduced in React 18. We have already seen some of these in this blog. Let us take a closer look at them in this section.

useId

useId creates distinct IDs on the client and server while preventing hydration inconsistencies. It is most helpful when connecting component libraries with accessibility APIs that demand distinct IDs. Due to the way the new streaming server renderer transmits HTML out-of-order in React 18, this resolves a problem that existed in React 17 and earlier versions of the framework. It might be important to note here, that useId does not generate keys in a list. Your data has to generate keys.

useTransition

As already discussed, useTransition and startTransition hooks to let you distinguish certain state updates to be non-urgent. When a state update is marked as non-urgent, other state updates are by default deemed urgent. React interrupts non-urgent state updates to permit urgent state updates. This is possible through Concurrent Rendering.

useDeferredValue

You can postpone re-rendering a non-urgent component of the tree with the useDeferredValue hook. It is comparable to debouncing but differs from it in a few ways. Since there is no set amount of time for the delay, React will try the delayed render as soon as the initial render is on the display. Deferred renders can be interrupted and do not obstruct inputs from the user.

useSyncExternalStore

Another new hook called useSyncExternalStore makes modifications to external stores concurrent. This enables them to handle concurrent reading. It should be used for whichever library interfacing with state outside of React. It eliminates the rule for useEffect when building subscriptions to external data sources.

useInsertionEffect

The CSS-in-JS libraries can handle rendering performance issues by using the new hook useInsertionEffect. You are not likely to use this until you have already created a CSS-in-JS library. This hook will execute following DOM mutation, but before layout effects reading the modified layout. This fixes a problem that was present in React v17.0. But it is more crucial in React v18.0. React 18 yields to the browser during concurrent rendering to make time to reload the layout.

What does React 18 Hold for the Future?

We are almost at the end of this discussion. Back in 2021 when the release of React 18 was declared, there have been many speculations about what is in store. We premeditated that the new React version would focus on third-party library maintainers. As we see it now, this was for the most part correct. Although React 18 is jam-packed with new features, there is a major emphasis on gradual shift.

Concurrent React is one of the most exciting features for enhancing performance. Suspense was present in previous versions of React in an initial stature. React 18 has unfurled a fuller extent of its capabilities. While Concurrent promises performance, Suspense paves the path for innovation. It is fair to speculate that Suspense would bring even more exciting features with the future versions of React.

React 18 has handled the concerns on its adoption rather well. It has introduced several new hooks to ensure that the new features of React 18 work for third-party library maintainers. New client and server rendering APIs are also added. These are basically exported from older APIs and modified. This too enables a hassle-free, gradual adoption of React 18.

The latest words from the React Team have some even more exciting sneak-peaks from the future React versions. To begin with, React Server Components is ready for release. We are also hearing about features of asset loading, SSR optimization, and transition tracing. React Optimizing Compiler, which was declared in React Conf 2021 is also underway!