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

Features

🔍

Presets

• dom
• recommended
• recommended-typescript
• recommended-type-checked

What it does

Prevents usage of 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

• Legacy React: react-dom/render