noRenderReturnValue

JSX and TSX

Summary

• Rule available since: v1.0.0
• Diagnostic Category: lint/correctness/noRenderReturnValue
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• This rule belongs to the following domains:
  • react

How to configure

biome.json

{
  "linter": {
    "rules": {
      "correctness": {
        "noRenderReturnValue": "error"
      }
    }
  }
}

Description

Prevent the usage of the return value of React.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.

Source: ReactDOM documentation

Examples

Invalid

const foo = ReactDOM.render(<div />, document.body);

code-block.jsx:1:13 lint/correctness/noRenderReturnValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Do not depend on the value returned by the function ReactDOM.render().
  
  > 1 │ const foo = ReactDOM.render(<div />, document.body);
      │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The returned value is legacy and future versions of React might return that value asynchronously.
    Check the React documentation for more information.
  

Valid

ReactDOM.render(<div />, document.body);

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases