A summary of the React 16 lifecycle methods

react-16-lifecycle.js

class ComponentWithLifecycle extends React.Component {
  // Commonly Used Lifecycle Methods
  constructor() {
    - Lifecycle: Mounting (before render)
    - Purpose: Initialize state
  }
  
  componentDidMount() {
  	- Lifecycle: Mounting (immediately after render)
    - Purpose: Initialize state that requires DOM nodes,
      	Network requests and side effects
  }
  
  componentDidUpdate() {
  	- Lifecycle: Updating (immediately after update)
    - Purpose: Operate on updated DOM or handle network requests
  }
  
  componentWillUnmount() {
    - Lifecycle: Unmounting
    - Purpose: Clean up things such as event handlers, cancel network requests, etc
  }
  
  // Rarely Used Lifecycle Methods
  static getDerivedStateFromProps() {
  	- Lifecycle: Mounting and Updating (immediately before render)
    - Purpose: When your state depends on props (should be avoided)
  }
  
  shouldComponentUpdate() {
  	- Lifecycle: Updating (immediately before render), return boolean
    - Purpose: Allows developer to prevent rendering
  }
 
  getSnapshotBeforeUpdate() {
  	- Lifecycle: Updating (immediately before render output is committed to DOM)
    - Purpose: Capture DOM information such as scroll position which could change
  }
  
  // Special Use Cases
  componentDidCatch() {
    - Creates an error boundary to captures errors from child components
  }
  
  // Required
  render() {
  	- Code to display the component
  }
}

Lifecycle Explanation:
- Mounting: Called before your component is displayed on the UI
- Updating: Caused by a change to props or state and rerenders the UI
- Unmounting: Called when your UI will no longer display the component