React/19/Replace Reactdom Render

1.0.8Last update Jul 24, 2024

@Codemod

Codemod verified

Regularly tested and maintained by our engineers and codemod expert community.

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 />);

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

Get Started Now