React 18 to 19 Migration

React 19 introduces several new features and improvements, including:

1. Actions: Automate handling of pending states, errors, forms, and optimistic updates using new hooks like useTransition and useActionState.
2. New API: use: Read resources in render, supporting conditional calls and promises.
3. Server Components and Server Actions: Enable async functions on the server, improving performance.
4. Improved Hydration: Better error reporting and compatibility with third-party scripts.
5. Enhanced Ref Handling: Simplified ref access and cleanup functions.

For more details, check out what’s new in React 19.

Codemod supports a mostly automated React 19 upgrade experience. This page provides tips and resources you may need for a successful migration.

Getting started

React 19 Upgrade Guide

React 19 Upgrade Recipe

Migration Steps

1

Installation

Install the latest version of React and React DOM:

npm install --save-exact react@rc react-dom@rc

or, if you’re using Yarn:

yarn add --exact react@rc react-dom@rc

2

Update types (Optional - TypeScript only)

If you’re using TypeScript, you also need to update the types. Once React 19 is released as stable, you can install the types as usual from @types/react and @types/react-dom. Until the stable release, the types are available in different packages which need to be enforced in your package.json:

package.json

{
"dependencies": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
},
"overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
}
}

3

Run codemods

Run the React 19 upgrade recipe:

npx codemod@latest react/19/migration-recipe

This recipe is a set of codemods that will fix some of React 19 breaking changes.

The recipe includes the following codemods:

• react/19/replace-reactdom-render
• react/19/replace-string-ref
• react/19/replace-act-import
• react/19/replace-use-form-state
• react/prop-types-typescript

For a list of all available codemods, see the react-codemod repo.