React/19/Replace Reactdom Render

Last update

Jul 24, 2024

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