javascript Inconsistent Code Style Enforcement in React Components

Inconsistent Code Style Enforcement in React Components

Open bitcooker opened this issue 1 year ago • 4 comments

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