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:

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

Was this page helpful?

Making Your First CodemodNuxt 3 to 4 Migration