no-render-return-value
Disallows the return value of 'ReactDOM.render'.
Full Name in eslint-plugin-react-dom
react-dom/no-render-return-valueFull Name in @eslint-react/eslint-plugin
@eslint-react/dom-no-render-return-valuePresets
dom
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
ReactDOM.render() currently returns a reference to the root React component instance. However, using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root React component instance, the preferred solution is to attach a callback ref to the root element.
Examples
Capturing the return value of ReactDOM.render()
The return value of ReactDOM.render() is considered legacy and may break with future React updates.
// Problem: depending on the return value of ReactDOM.render().
import ReactDOM from "react-dom";
const instance = ReactDOM.render(<div id="app" />, document.body);
// ^^^ Do not depend on the return value from '{{objectName}}.render'.// Recommended: use a callback ref on the root element instead.
import ReactDOM from "react-dom";
function doSomethingWithInst(inst: HTMLDivElement | null) {
// ...
}
ReactDOM.render(<div id="app" ref={doSomethingWithInst} />, document.body);Using the callback parameter of ReactDOM.render()
The callback parameter of ReactDOM.render() is also legacy and should be avoided. Use useEffect inside the rendered component instead.
// Problem: using the callback parameter of ReactDOM.render().
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container, () => {
console.log('rendered');
});// Recommended: use useEffect inside the rendered component.
import { useEffect } from 'react';
import { createRoot } from 'react-dom/client';
function AppWithCallbackAfterRender() {
useEffect(() => {
console.log('rendered');
});
return <App tab="home" />;
}
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<AppWithCallbackAfterRender />);