Paul Krill
Editor at Large

React 19 builds on async transitions

news
Apr 26, 20242 mins

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
Credit: Kevin Ku

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.
Paul Krill

Paul Krill is editor at large at InfoWorld. Paul has been covering computer technology as a news and feature reporter for more than 35 years, including 30 years at InfoWorld. He has specialized in coverage of software development tools and technologies since the 1990s, and he continues to lead InfoWorld’s news coverage of software development platforms including Java and .NET and programming languages including JavaScript, TypeScript, PHP, Python, Ruby, Rust, and Go. Long trusted as a reporter who prioritizes accuracy, integrity, and the best interests of readers, Paul is sought out by technology companies and industry organizations who want to reach InfoWorld’s audience of software developers and other information technology professionals. Paul has won a “Best Technology News Coverage” award from IDG.

More from this author