React/19/Replace Reactdom Render

Last update

Sep 12, 2025

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