sort-comp

Keywords: React, component methods, ordering, lifecycle, code organization, ESLint rule, LLM-optimized

Enforce component method ordering in React class components. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Warning (organization)
Auto-Fix	❌ No (requires reordering)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React class components with consistent style

Rule Details

Enforces a consistent ordering of methods within React class components, making code more predictable and easier to navigate.

Why This Matters

Issue	Impact	Solution
🔄 Inconsistent structure	Hard to find methods	Standardized ordering
🐛 Review difficulty	Different patterns across team	Consistent conventions
🔍 Onboarding	New devs struggle to navigate	Predictable structure

Default Order

static-variables - Static class properties
static-methods - Static methods
instance-variables - Instance properties
lifecycle - React lifecycle methods
everything-else - Custom methods
render - The render method (always last)

Lifecycle Methods Order

Within the lifecycle group, methods follow React's lifecycle order:

constructor
getDerivedStateFromProps
componentDidMount
shouldComponentUpdate
componentDidUpdate
componentWillUnmount

Examples

❌ Incorrect

class UserProfile extends React.Component {
  // BAD: render before lifecycle
  render() {
    return <div>{this.state.name}</div>;
  }
  
  // BAD: lifecycle after render
  componentDidMount() {
    this.fetchUser();
  }
  
  // BAD: constructor not first
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }
  
  // BAD: static after instance methods
  static propTypes = {
    userId: PropTypes.string.isRequired
  };
}

✅ Correct

Awaiting a tested example. The previous snippet was removed because the rule does not behave as the doc claimed; track the regression in benchmarks/FP_FN_REMEDIATION_TRACKER.md.

Options

Option	Type	Default	Description
`order`	string[]	See default order	Array of group names in order
`groups`	object	`{}`	Custom group definitions

Configuration with Options

{
  rules: {
    'react-features/sort-comp': ['warn', {
      order: [
        'static-variables',
        'static-methods',
        'instance-variables',
        'lifecycle',
        'event-handlers',
        'getters',
        'everything-else',
        'render'
      ],
      groups: {
        'event-handlers': [
          '/^handle.+$/',
          '/^on.+$/'
        ]
      }
    }]
  }
}

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/sort-comp': 'warn'
  }
}

prefer-stateless-function - Functional components
state-in-constructor - State initialization

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.