Inconsistent Code Style Enforcement in React Components

[bitcooker]

There seems be notable inconsistencies in how code style rules are applied within the React components section.

• Method Ordering:
  There are discrepancies in the ordering of lifecycle methods and custom methods in the React components.
  For example, some components list componentDidMount before componentWillUnmount, while others do not follow this order.

// Example 1
class MyComponent extends React.Component {
  componentDidMount() {
    // logic
  }
  
  componentWillUnmount() {
    // logic
  }
  
  customMethod() {
    // logic
  }
}

// Example 2
class AnotherComponent extends React.Component {
  customMethod() {
    // logic
  }
  
  componentWillUnmount() {
    // logic
  }
  
  componentDidMount() {
    // logic
  }
}

• State Initialization:
  The initialization of state in constructor methods varies across different examples. Some components use direct state initialization within the constructor, while others use class property syntax.

// Example 1
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

// Example 2
class MyComponent extends React.Component {
  state = {
    count: 0
  };
}

• Event Handler Bindings:
  Inconsistent usage of binding event handlers in the constructor versus using class properties to define arrow functions.

// Example 1
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // logic
  }
}

// Example 2
class MyComponent extends React.Component {
  handleClick = () => {
    // logic
  }
}

[Medha170]

Can you assign this issue to me?

[ljharb]

@Medha170 no, because that's not how open source works. issues don't get assigned, you just make a PR.

[prateekbisht23]

@bitcooker Would you mind specifying the path to the code you mentioned!?