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.

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);

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: render