What is ordering on components in React style guides from Airbnb?

Airbnb has a JavaScript Github repo where they keep a list of the best practices in JavaScript, as well as CSS, React, CSS-in-JavaScript, and more. In this shot, we will be discussing the important rules of writing React.

Most of these rules are based on making our React code clearer and cleaner, and a few of them make our React app run faster. We will look into methods and properties ordering on components.

Methods and properties ordering on components

Methods and properties of React components should be placed in an orderly fashion:

Optional static methods
constructor
getChildContext
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
Click handlers or event handlers like onClickSubmit() or onChangeDescription()
Getter methods for render like getSelectReason() or getFooterContent()
Optional render methods like renderNavigation() or renderProfilePicture()
Render

The list above shows how methods and properties should be placed in a React component. Notice that from componentWillMount to componentWillUnmount, they are arranged in the order they will be called in a component lifecycle.

The static methods come first:

class MyComponent extends React.Component {
  static aStaticMethod() {
    // ...
  }
}

Then, the constructor method and getChildContext:

class MyComponent extends React.Component {
  static aStaticMethod() {
    // ...
  }
  constructor() {
    // ...
  }
  getChildContext() {
    // ...
  }
  componentWillMount() {
    // ...
  }
  componentDidMount() {
    // ...
  }
  componentWillReceiveProps() {
    // ...
  }
  shouldComponentUpdate() {
    // ...
  }
  componentWillUpdate() {
    // ...
  }
  componentDidUpdate() {
    // ...
  }
  componentWillUnmount() {
    // ...
  }
  onSubmitHandler() {
    // ...
  }
  clickHandler() {
    // ...
  }
  render() {
    // ...
  }
}

React static properties are then arranged as follows:

propTypes
defaultProps
contextTypes
etc.

class MyComponent extends React.Component {
  // ...
}

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;
MyComponent.contextTypes = contextTypes;