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

Description

Disallow the return value of ReactDOM.render.

ReactDOM.render() currently returns a reference to the root ReactComponent 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 ReactComponent instance, the preferred solution is to attach a callback ref to the root element.

Examples

Failing

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

Passing

import React from "react";
import ReactDOM from "react-dom";
 
function doSomethingWithInst(inst: HTMLDivElement | null) {
  // ...
}
 
ReactDOM.render(<div id="app" ref={doSomethingWithInst} />, document.body);

Implementation

• Rule source
• Test source

Further Reading

• React DOM render

See Also

• no-render
  Replaces usages of ReactDom.render() with createRoot(node).render().