no-render-return-value

Prevent using the return value of ReactDOM.render(). This rule is part of eslint-plugin-react-features.

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

ReactDOM.render() returns the root component instance, but this is deprecated and doesn't work with concurrent mode.

Why This MattersCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

const instance = ReactDOM.render(<App />, container);
instance.doSomething();  // Using return value

✅ CorrectCopy Anchor Link

// React 18+ with createRoot
import { createRoot } from 'react-dom/client';

const root = createRoot(container);
root.render(<App />);

// Use refs for component instances
const appRef = React.createRef();
root.render(<App ref={appRef} />);

// Access via ref
appRef.current?.doSomething();

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

{
  rules: {
    'react-features/no-render-return-value': 'error'
  }
}

Related RulesCopy Anchor Link

• react-class-to-hooks - Modernization

Further ReadingCopy Anchor Link

• React 18 - createRoot - React 18 API
• Upgrading to React 18 - Migration guide

Known False NegativesCopy Anchor Link

• Other uses of the value: ReactDOM.render(...).focus(), ReactDOM.render(...) && x or an arrow's implicit return (() => ReactDOM.render(...)) are not reported; only a variable initialiser, an assignment, a return and an argument are.
• A bare render the file never imports names no module and is not read.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/no-render-return-value": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/no-render-return-value': 'error',    },  },});