What is the recommended ordering of methods in component class?

1. `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()`

import React, { Component } from 'react';

export class OrderViewer extends Component<{ id: string }, { details: any }> {
  // 1. Static methods & properties
  static defaultProps = { id: '0' };
  static getDerivedStateFromProps(props: any, state: any) { return null; }

  // 2. Constructor
  constructor(props: any) {
    super(props);
    this.state = { details: null };
  }

  // 3. Lifecycle methods (Mounting -> Updating -> Unmounting)
  componentDidMount() { this.load(); }
  shouldComponentUpdate(nextProps: any, nextState: any) { return true; }
  getSnapshotBeforeUpdate(prevProps: any, prevState: any) { return null; }
  componentDidUpdate(prevProps: any, prevState: any) {}
  componentWillUnmount() {}

  // 4. Custom event handlers & helper methods
  private load = () => { /* fetch details */ };
  private handleClick = () => { /* user action */ };

  // 5. Render method (always last)
  render() {
    return <div onClick={this.handleClick}>Order Details</div>;
  }
}