sort-comp

sort-comp rule

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

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

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

Why This MattersCopy Anchor Link

Default OrderCopy Anchor Link

1. static-variables - Static class properties
2. static-methods - Static methods
3. instance-variables - Instance properties
4. lifecycle - React lifecycle methods
5. everything-else - Custom methods
6. render - The render method (always last)

The lifecycle group holds the constructor and React's lifecycle methods (componentDidMount, shouldComponentUpdate, componentDidUpdate, componentWillUnmount, …); their order among themselves is not checked. Member names are read in every spelling (['render']()). The class must extend React's Component or PureComponent, by binding, declared or as a class expression.

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

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
  };
}

✅ CorrectCopy Anchor Link

class UserProfile extends React.Component {
  static propTypes = {
    userId: PropTypes.string.isRequired,
  };

  state = { name: '' };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.fetchUser();
  }

  fetchUser() {}

  render() {
    return <div>{this.state.name}</div>;
  }
}

OptionsCopy Anchor Link

Configuration with OptionsCopy Anchor Link

{
  rules: {
    'react-features/sort-comp': ['warn', {
      order: [
        'static-variables',
        'static-methods',
        'lifecycle',
        'instance-variables',
        'everything-else',
        'render'
      ]
    }]
  }
}

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

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

Related RulesCopy Anchor Link

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

Further ReadingCopy Anchor Link

• Component Lifecycle - React docs
• Class Components - Structure

Known False NegativesCopy Anchor Link

• Lifecycle methods are not ordered among themselves; only the groups are.
• getDerivedStateFromProps is a static method, so it sorts with static-methods.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/sort-comp": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/sort-comp': 'error',    },  },});