src/content/docs/linter/rules/no-render-return-value.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/correctness/noRenderReturnValue`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`react`](/linter/domains#react) ## How to configure ```json title="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](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)
to the root element.
Source: [ReactDOM documentation](https://facebook.github.io/react/docs/react-dom.html#render)
## Examples
### Invalid
```jsx
const foo = ReactDOM.render(<div />, document.body);
ReactDOM.render(<div />, document.body);