How to Upgrade to React 19 RC: Installation, JSX Changes, and Breaking Updates

React 19 RC version has arrived with exciting new features and improvements, but also some breaking changes. The React team has simplified the upgrade process to minimize impact on most applications.

📦 Install the new version

Update React and React DOM to the latest RC version using npm or Yarn with exact versions.

<code>npm install --save-exact react@rc react-dom@rc</code>

or

<code>yarn add --exact react@rc react-dom@rc</code>

🌟 New JSX Transform Requirements

React 19 introduces a new JSX transform that requires updating your build configuration. Most environments enable it by default, but manual upgrade guidance is available in the official announcement.

⚠️ Important Notes

React 18.3 : Released to help ease the upgrade to React 19 by adding warnings for required changes.

TypeScript users : Install type definitions via @types/react and @types/react-dom after the stable release.

🛠️ Code Modernization: Codemods

The React team, in partnership with codemod.com, provides codemods that automatically update your code to the new APIs and patterns in React 19.

💥 Breaking Changes Overview

Error handling : Errors thrown during rendering are reported via window.reportError or console.error instead of being re‑thrown.

Removed deprecated APIs : propTypes , defaultProps , legacy context, string refs, module pattern factories, React.createFactory , and others have been removed.

🔧 Newly Deprecated Features

element.ref : The ref attribute is now supported, so element.ref is deprecated.

react-test-renderer : Deprecated because it implements its own rendering environment and depends on internal React structures.

🎉 Notable Changes

StrictMode changes : In development mode, useMemo and useCallback reuse the memoized result from the first render during double rendering.

UMD build removal : React 19 no longer generates a UMD build; ESM‑based CDN loading is recommended.

📝 TypeScript Changes

Type definitions for APIs removed in React 19 have been cleaned up.

useRef now requires a parameter, simplifying its type signature.

The props of ReactElement now default to unknown instead of any .

🔍 Other Changes and Removals

Removed act and other rarely used utilities from react-dom/test-utils .

Removed ReactDOM.render , ReactDOM.hydrate , unmountComponentAtNode , and ReactDOM.findDOMNode .

React 19 represents a major step forward with performance improvements and new features. Follow this guide to upgrade smoothly and embrace the new capabilities.

Reference: https://zh-hans.react.dev/blog/2024/04/25/react-19-upgrade-guide