React 18 - Here's What's New

React 18 is here! The latest release, including optimizations and a few new features, is now available on NPM. Here’s what’s new…

React 18 features were announced back in mid-2021 and are now available for general consumption via NPM. Much of this update is behind-the-scenes. A new concurrent render brings optimizations and will support features in later releases. I won’t get into the weeds on that topic, but there are few notable things that are notable now.

Concurrent React

What does that even mean? Well, for the most part, the new concurrent renderer is just an implementation detail that you needn’t be concerned with. That said, it brings some interesting new features and possibilities. In an effort to keep this brief, I’ll avoid getting into the nitty-gritty, details of how this works and over-simplify the difference:

Previously updates were rendered synchronously, from start to finish. If another update were to occur before the previous render was complete, its processing would be blocked. With concurrent rendering, these updates can now be interrupted and later resumed.

That may not sound meaningful on the surface, but it allows for higher-level functionality like prioritizing updates… speaking of which…

Transitions

This new feature is a simple but powerful one. It allows us to declare when updates are/aren’t urgent - that is, when they should take priority with regard to rerendering. As an example, consider user input in a search field. The input itself and updates to the UI should be processed immediately for a smooth UX; the updates that drive the actual search, however, are a lesser priority.

Here’s what it looks like:

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
	// Transition: Show the results
	setSearchQuery(input);
});

The update via setInputValue() will be considered an “urgent” update and will be processed in a traditional sense The updates wrapped in startTransition(), however, are considered “non-urgent” and will be interrupted if a more urgent update comes in (e.g. clicks or other user-input).

Read more about transitions here.

Suspense for data retrieval

The suspense feature came in React 16.6 as a convenient means of declaring a loading state. The use cases at that point were fairly limited, but the feature has received incremental updates since. In react 18, Suspense has been buffed up by the new concurrent renderer and streaming features, and works well in with the transition API.

Most notably, Suspense is now supported server side. If you’re working with something like Next.js or Relay you can now use Suspense in conjunction with Streaming SSR for data fetching. You can read more on the latest Suspense features here

Automatic Batching

Automatic batching isn’t entirely new, but the optimization has expanded. You’re probably already familiar with the fact that if you make multiple state changes in a single React event that those changes are batched into a single update. Up to now, this automatic batching only occurred for updates within React events. With React 18, updates declared in promises, event handlers, and other callback functions are batched as well.

More on that here

Server Components

Unfortunately, server components are still isn’t ready for primetime, but an initial version is expected in a minor 18.x release.

But wait, there’s more…

There’s a bunch of other new stuff in React 18 worth taking about, but I want to keep this brief. Here’s a breakdown of everything not yet mentioned:

Spence DiNicolantonio Principal Consultant