prefer-es6-class

Keywords: React, ES6 class, createClass, migration, ESLint rule, modern syntax, LLM-optimized

Prefer ES6 class syntax over React.createClass. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Error (deprecated)
Auto-Fix	❌ No (requires refactoring)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	Migrating legacy React code

Rule Details

React.createClass is deprecated. Use ES6 class or function components.

Why This Matters

Issue	Impact	Solution
⚠️ Deprecated	Removed from React	ES6 class or hooks
📦 Bundle size	Requires separate package	Native syntax
🔧 Modern tooling	Poor TypeScript support	Standard patterns

Examples

❌ Incorrect

const MyComponent = React.createClass({
  getInitialState() {
    return { count: 0 };
  },
  render() {
    return <div>{this.state.count}</div>;
  }
});

✅ Correct

// ES6 Class
class MyComponent extends React.Component {
  state = { count: 0 };
  
  render() {
    return <div>{this.state.count}</div>;
  }
}

// Or function with hooks (recommended)
function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/prefer-es6-class': 'error'
  }
}

react-class-to-hooks - Modern migration

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.