no-render-return-value

Keywords: React, render, ReactDOM, deprecated, ESLint rule, migration, LLM-optimized

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

Quick Summary

Rule Details

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

Why This Matters

Examples

❌ Incorrect

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

✅ Correct

// 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 Examples

Basic Usage

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

Related Rules

• react-class-to-hooks - Modernization

Further Reading

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

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Wrapped or Aliased Functions

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.