React component Lifecycle methods

sample.js

class Component extends React.Component {
  static getDerivedStateFromProps (nextProps, prevState) {
    // -> nextState
    // | Called after instantiating and when it receives new props
  }

  render () {
    // -> jsx
  }
  
  componentDidMount () {
    // | Called just after mounting, handy for calling the network and setting up subscriptions
    // | setState will trigger rendering before the DOM is updated
  }

  shouldComponentUpdate(nextProps, nextState) {
    // -> shouldUpdate
    // | Checks whether the component should update.
  }

  getSnapshotsBeforeUpdate () {
    // Invoked before rendering output to the DOM
    // Used to mitigate any sideeffects caused by an update
    // Result will be passed to `componentDidUpdate`
  }

  componentDidUpdate (prevProps, prevState, snapshot) {
    // Invoked after updateing 
    // Not called for initial render
  }

  componentWillUnmount () {
    // Called before the component unmounts
    // Remove timers, subscriptions, cancel network calls, etc.
  }

  componentDidCatch (error, info) {
    // Error boundaries for the component. 
    // Handy for catching errors during rendering, in lifecycle methods.
  }

}