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:

1. Optional static methods
2. constructor
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. Click handlers or event handlers like onClickSubmit() or onChangeDescription()
12. Getter methods for render like getSelectReason() or getFooterContent()
13. Optional render methods like renderNavigation() or renderProfilePicture()
14. 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:

Next come the lifecycle hooks:

Next, the event handlers:

Next, we add any getter methods.

Finally, we add the render method:

React static properties are then arranged as follows:

1. propTypes
2. defaultProps
3. contextTypes
4. etc.

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

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