React 18 is currently in alpha and is expected to be released later this year. Check out the Concurrent Mode, Transition, and some useful new features

An overview of the

This article is intended to provide an overview of React 18’s plans and serve as a jump point to other topics in the discussion. At a high level, React 18 includes out-of-the-box improvements to existing features. It is also the first React release to add support for concurrency, which allows you to improve the user experience in ways that React didn’t allow before.

Concurrency is optional and can be adopted over time.

Out-of-the-box improvements

React 18 will include out-of-the-box improvements:

  • Automatic batching to reduce rendering
  • Suspense SSR support
  • Fix Suspense behavior quirks

Most applications should be able to upgrade to React 18 using the New Root API and immediately see the benefits of these improvements.

Once on React 18 you can start using concurrency!

The concurrency

React 18 will be the first React release to add support for concurrency options, such as:

  • StartTransition: Lets you keep the UI responsive during expensive state transitions.
  • useDeferredValueLets you delay updating less important parts of the screen.
  • <SuspenseList> : lets you coordinate the order in which load indicators appear.
  • Streaming SSR via selective hydration: Let your applications load and interact faster.

You can start using these features in a small part of the tree without having to enable strict mode for the entire application.

Note: If you are familiar with concurrent “patterns”, see: What Happens to concurrent “patterns”.

How about Suspense for data retrieval?

The React 18 release includes work related to basics, but may not include recommended data fetching solutions yet. A complete solution would need to include Server Components and a built-in Cache, and these projects are still in progress. We want them done in the 18.x timeline, but not necessarily in the initial 18.0 release.

See this answer for complete details in Suspense>React 18.

How to upgrade

Upgrading to React 18 will be the same as any major React versions, such as 16 and 17 (by updating to the latest React 18 version and attaching the reactdom.createroot step from switching to Reactdom.render). After the upgrade, we recommend that you do your usual upgrade testing to clear up any issues with the out-of-the-box improvements.

For detailed technical upgrade guidelines, see:

  • How do I upgrade to React 18 on the client
  • How to upgrade to React 18 on the server

After upgrading to React 18, you can start using concurrency:

  • Coming Soon: How to use concurrency progressively
  • Coming soon: Concurrency React for library authors.

Related articles

  • React 18 release schedule
  • Replace rendering with createRoot
  • Suspense behavior changes in React 18
  • Change to strict mode
  • New Suspense SSR architecture

Original address: github.com/reactwg/rea…