Back

React/19/Replace Reactdom Render

1.0.8Last update Jul 24, 2024
by@alexbit-codemod
React
migration
  • Replaces usages of ReactDom.render() with createRoot(node).render().
  • Replaces usages of ReactDom.hydrate() with hydrateRoot()
  • Replaces usages of ReactDom.unmountComponentAtNode() with root.unmount()

Example

Before

import ReactDom from "react-dom";
import Component from "Component";


ReactDom.render(<Component />, document.getElementById('app'));

After

import { createRoot } from "react-dom/client";
import ReactDom from "react-dom";
import Component from "Component";


const root = createRoot(document.getElementById('app'));
root.render(<Component />);

Before

import ReactDom from "react-dom";
import Component from "Component";


ReactDom.hydrate(<Component />, document.getElementById("app"));

After

import { hydrateRoot } from "react-dom/client";
import ReactDom from "react-dom";
import Component from "Component";


hydrateRoot(document.getElementById("app"), <Component />);

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

background illustrationGet Started Now