prefer-stateless-function

Keywords: React, class component, function component, hooks, ESLint rule, migration, LLM-optimized

Prefer stateless function components over class components. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Warning (best practice)
Auto-Fix	❌ No (requires refactoring)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	Modern React codebases

Rule Details

Class components without state or lifecycle methods should be function components.

Why This Matters

Issue	Impact	Solution
📦 Bundle size	Classes add overhead	Functions are smaller
📖 Readability	More boilerplate	Cleaner syntax
⚡ Performance	Class instance creation	Function call only

Examples

❌ Incorrect

// Class without state or lifecycle
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// Pure render class
class List extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

✅ Correct

// Function component
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

// Arrow function component
const List = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

// Class with state (appropriate)
class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return <span>{this.state.count}</span>;
  }
}

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/prefer-stateless-function': 'warn'
  }
}

react-class-to-hooks - Full 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.

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.