no-render

Full Name in eslint-plugin-react-dom

react-dom/no-render

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom/no-render

Features

🔄

Presets

• dom
• recommended
• recommended-typescript
• recommended-type-checked

Description

Replaces usages of ReactDom.render() with createRoot(node).render().

Examples

Before

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

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

After

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

createRoot(document.getElementById("app")).render(<Component />);

Implementation

• Rule Source
• Test Source

Further Reading

• React Docs: DOM render
• React DOM createRoot

See Also

• no-render-return-value
  Prevents usage of the return value of ReactDOM.render.
• no-hydrate
  Replaces usages of ReactDom.hydrate() with createRoot(node).hydrate().