no-render
Replaces usage of 'ReactDOM.render()' with 'createRoot(node).render()'.
Full Name in eslint-plugin-react-dom
react-dom/no-renderFull Name in @eslint-react/eslint-plugin
@eslint-react/dom-no-renderFeatures
🔄
Presets
dom
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
Examples
Bootstrapping a React app with the legacy API
import Component from "Component";
import ReactDOM from "react-dom";
// Problem: ReactDOM.render() is the legacy API and will be removed in React 18+
ReactDOM.render(<Component />, document.getElementById("app"));import Component from "Component";
import { createRoot } from "react-dom/client";
// Recommended: Use createRoot() from "react-dom/client" instead
createRoot(document.getElementById("app")).render(<Component />);Using render() from react-dom
Importing render directly from react-dom is also deprecated and should be migrated to createRoot().
// Problem: render() from react-dom is the legacy API.
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);// Recommended: use createRoot() from react-dom/client.
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);