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 8060056cb..5d222cb97 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 @@ -405,7 +405,7 @@ root.render(); -Codemod `ReactDOM.render` to `ReactDOM.createRoot`: +Codemod `ReactDOM.render` to `ReactDOMClient.createRoot`: ```bash npx codemod@latest react/19/replace-reactdom-render @@ -427,6 +427,15 @@ import {hydrateRoot} from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ``` + + +Codemod `ReactDOM.hydrate` to `ReactDOMClient.hydrateRoot`: + +```bash +npx codemod@latest react/19/replace-reactdom-render +``` + + #### Removed: `unmountComponentAtNode` {/*removed-unmountcomponentatnode*/} @@ -443,8 +452,18 @@ root.unmount(); For more see `root.unmount()` for [`createRoot`](https://react.dev/reference/react-dom/client/createRoot#root-unmount) and [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot#root-unmount). + + +Codemod `unmountComponentAtNode` to `root.unmount`: + +```bash +npx codemod@latest react/19/replace-reactdom-render +``` + + #### Removed: `ReactDOM.findDOMNode` {/*removed-reactdom-finddomnode*/} + `ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode). We're removing `findDOMNode` because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). You can replace `ReactDOM.findDOMNode` with [DOM refs](/learn/manipulating-the-dom-with-refs):