require-render-return

Keywords: React, render, return, class component, ESLint rule, correctness, LLM-optimized

Require return statement in render methods. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Error (correctness)
Auto-Fix	❌ No
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React class components

Rule Details

The render() method must return a React element, null, or nothing (undefined implicitly returns null).

Why This Matters

Issue	Impact	Solution
🐛 Silent failure	Component renders nothing	Add return statement
❓ Unclear intent	Is missing return intentional?	Explicit return
🧪 Testing	Hard to catch in tests	Static analysis

Examples

❌ Incorrect

class MyComponent extends React.Component {
  render() {
    <div>Hello</div>;  // Missing return!
  }
}

class AnotherComponent extends React.Component {
  render() {
    if (this.props.show) {
      return <div>Content</div>;
    }
    // Missing return for else case
  }
}

✅ Correct

class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

class AnotherComponent extends React.Component {
  render() {
    if (this.props.show) {
      return <div>Content</div>;
    }
    return null;  // Explicit return
  }
}

Configuration Examples

Basic Usage

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

display-name - Component naming
prefer-stateless-function - Function components

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.

Cross-Module Data Flow

Why: ESLint rules analyze one file at a time. Values imported from other modules cannot be traced.

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

Mitigation: Apply the same rule to imported modules. Use module boundaries and explicit exports.