no-render-return-value

Rule category

Restriction.

What it does

Prevents usage of the return value of ReactDOM.render.

Why is this bad?

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 import ReactDOMReactDOM from "react-dom";
 
const const instance: voidinstance = import ReactDOMReactDOM.const render: ReactDOM.Renderer
(element: React.FunctionComponentElement<any> | React.FunctionComponentElement<any>[], container: ReactDOM.Container | null, callback?: (() => void) | undefined) => void (+6 overloads)@deprecatedSee https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apisrender(<JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.id?: string | undefinedid="app" />, var document: Document[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.body: HTMLElementSpecifies the beginning and end of the document body.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/body)body);
//    - Do not depend on the return value from '{{objectName}}.render'.

Passing

import React from "react";
import import ReactDOMReactDOM from "react-dom";
 
function function doSomethingWithInst(inst: HTMLDivElement | null): voiddoSomethingWithInst(inst: HTMLDivElement | nullinst: HTMLDivElement | null) {
  // ...
}
 
import ReactDOMReactDOM.const render: ReactDOM.Renderer
(element: React.FunctionComponentElement<any> | React.FunctionComponentElement<any>[], container: ReactDOM.Container | null, callback?: (() => void) | undefined) => void (+6 overloads)@deprecatedSee https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apisrender(<JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.id?: string | undefinedid="app" React.RefAttributes<HTMLDivElement>.ref?: React.LegacyRef<HTMLDivElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={function doSomethingWithInst(inst: HTMLDivElement | null): voiddoSomethingWithInst} />, var document: Document[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.body: HTMLElementSpecifies the beginning and end of the document body.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/body)body);