React 19 builds on async transitions

Now in beta, React 19 supports using async functions in transitions to handle pending states, errors, forms, and optimistic updates automatically.

coder/programmer sits at the center of a clock
Kevin Ku (CC0)

React 19, the latest version of Meta’s JavaScript library for rendering user interfaces, is now available in beta. The update introduces features such as async functions in transitions and the ability to access ref as a prop for function components.

The React 19 beta was unveiled April 25. A React 19 beta upgrade guide has been published.

React 19 adds support for using async functions in transitions to handle pending states, forms, errors, and optimistic updates automatically. Functions that use async transitions are called Actions. By building on top of Actions, React 19 introduces useOptimistic to manage optimistic updates and a new hook, React.useActionState, to handle common cases for Actions. Actions also are integrated with new <form> features for react-dom in React 19.

React 19 includes all of the React Server Components features from the Canary channel, meaning libraries that ship with Server Components now can target React 19 as a peer dependency with react-server export condition for use in frameworks that support the Full-stack React Architecture.

Other improvements in React 19:

  • A new API to read resources in render, called use, is introduced.
  • Error reporting has been improved for hydration errors in react-dom.
  • Better support is offered by async scripts; they can be rendered anywhere in a component tree.
  • APIs are offered for loading and preloading browser resources for building experiences not held by inefficient resource loading.
  • Hydration has been improved to account for third-party scripts and browser extensions.
  • Error handling has been improved to remove duplication and provide options for handling caught and uncaught errors.
  • Support is being added for rendering document metadata tags in components natively.
  • <Context> can be rendered as a provider instead of <Context.Provider>.
  • Cleanup functions can be returned from ref callbacks.
  • An initialValue option has been added to useDeferredValue.

Copyright © 2024 IDG Communications, Inc.