React 18 to 19 Migration
React 19 introduces several new features and improvements, including:
- Actions: Automate handling of pending states, errors, forms, and optimistic updates using new hooks like
useTransition
anduseActionState
. - New API:
use
: Read resources in render, supporting conditional calls and promises. - Server Components and Server Actions: Enable async functions on the server, improving performance.
- Improved Hydration: Better error reporting and compatibility with third-party scripts.
- 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
Migration Steps
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
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
:
{
"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"
}
}
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.
Was this page helpful?