diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 4d4355a47cc..cc1afe2a30d 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -39,6 +39,7 @@ For a list of changes in 18.3 see the [Release Notes](https://github.com/faceboo In this post, we will guide you through the steps for upgrading libraries to React 19 beta: - [Installing](#installing) +- [Codemods](#codemods) - [Breaking changes](#breaking-changes) - [New deprecations](#new-deprecations) - [Notable changes](#notable-changes) @@ -97,6 +98,37 @@ If you're using TypeScript, you also need to update the types. Once React 19 is We're also including a codemod for the most common replacements. See [TypeScript changes](#typescript-changes) below. +## Codemods {/*codemods*/} + +To help with the upgrade, we've worked with the team at [codemod.com](https://codemod.com) to publish codemods that will automatically update your code to many of the new APIs and patterns in React 19. + +All codemods are available in the [`react-codemod` repo](https://github.com/reactjs/react-codemod) and the Codemod team have joined in helping maintain the codemods. To run these codemods, we recommend using the `codemod` command instead of the `react-codemod` because it runs faster, handles more complex code migrations, and provides better support for TypeScript. + + + + +#### Run all React 19 codemods {/*run-all-react-19-codemods*/} + +Run all codemods listed in this guide with the React 19 `codemod` recipe: + +```bash +npx codemod@latest react/19/migration-recipe +``` + +This will run the following codemods from `react-codemod`: +- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) +- [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref) +- [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import) +- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) +- [`prop-types-typescript`](TODO) + +This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below. + + + +Changes that include a codemod include the command below. + +For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod). ## Breaking changes {/*breaking-changes*/} @@ -128,7 +160,7 @@ For more info, see the docs for [`createRoot`](https://react.dev/reference/react ### Removed deprecated React APIs {/*removed-deprecated-react-apis*/} #### Removed: `propTypes` and `defaultProps` for functions {/*removed-proptypes-and-defaultprops*/} -`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). +`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). In React 19, we're removing the `propType` checks from the React package, and using them will be silently ignored. If you're using `propTypes`, we recommend migrating to TypeScript or another type-checking solution. @@ -158,6 +190,16 @@ function Heading({text = 'Hello, world!'}: Props) { } ``` + + +Codemod `propTypes` to TypeScript with: + +```bash +npx codemod@latest react/prop-types-typescript +``` + + + #### Removed: Legacy Context using `contextTypes` and `getChildContext` {/*removed-removing-legacy-context*/} Legacy Context was deprecated in [October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html). @@ -253,7 +295,11 @@ class MyComponent extends React.Component { -To help with the migration, we will be publishing a [react-codemod](https://github.com/reactjs/react-codemod/#string-refs) to automatically replace string refs with `ref` callbacks. Follow [this PR](https://github.com/reactjs/react-codemod/pull/309) for updates and to try it out. +Codemod string refs with `ref` callbacks: + +```bash +npx codemod@latest react/19/replace-string-ref +``` @@ -340,6 +386,16 @@ All other `test-utils` functions have been removed. These utilities were uncommo See the [warning page](https://react.dev/warnings/react-dom-test-utils) for alternatives. + + +Codemod `ReactDOMTestUtils.act` to `React.act`: + +```bash +npx codemod@latest react/19/replace-act-import +``` + + + #### Removed: `ReactDOM.render` {/*removed-reactdom-render*/} `ReactDOM.render` was deprecated in [March 2022 (v18.0.0)](https://react.dev/blog/2022/03/08/react-18-upgrade-guide). In React 19, we're removing `ReactDOM.render` and you'll need to migrate to using [`ReactDOM.createRoot`](https://react.dev/reference/react-dom/client/createRoot): @@ -355,6 +411,16 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` + + +Codemod `ReactDOM.render` to `ReactDOM.createRoot`: + +```bash +npx codemod@latest react/19/replace-reactdom-render +``` + + + #### Removed: `ReactDOM.hydrate` {/*removed-reactdom-hydrate*/} `ReactDOM.hydrate` was deprecated in [March 2022 (v18.0.0)](https://react.dev/blog/2022/03/08/react-18-upgrade-guide). In React 19, we're removing `ReactDOM.hydrate` you'll need to migrate to using [`ReactDOM.hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot),