no-render-return-value

Full Name in eslint-plugin-react-dom

react-dom/no-render-return-value

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom/no-render-return-value

Presets

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.

Common Violations

Invalid

import ReactDOM from "react-dom";

const instance = ReactDOM.render(<div id="app" />, document.body);
//    ^^^ Do not depend on the return value from '{{objectName}}.render'.

Valid

import ReactDOM from "react-dom";

function doSomethingWithInst(inst: HTMLDivElement | null) {
  // ...
}

ReactDOM.render(<div id="app" ref={doSomethingWithInst} />, document.body);

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: render