react/no-render-return-value

Rule category

Restriction.

What it does

disallows 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 (opens in a new tab) to the root element.

Examples

❌ Incorrect

const inst = ReactDOM.render(<App />, document.body);
doSomethingWithInst(inst);

✅ Correct

ReactDOM.render(<App ref={doSomethingWithInst} />, document.body);
 
ReactDOM.render(<App />, document.body, doSomethingWithInst);

Further Reading

• legacy.reactjs.org: react-dom/render (opens in a new tab)