React Lifecycle of Components

 Lifecycle of Components

• Mounting 
• Updating 
• Unmounting

Mounting

• constructor()
• method is called before anything else, when the component is initiated, and it is the natural place to set up the initial state and other initial values
• getDerivedStateFromProps()
• method is called right before rendering the element(s) in the DOM.
• This is the natural place to set the state object based on the initial props.
• render()
• method is required, and is the method that actually outputs the HTML to the DOM.
• componentDidMount()
• method is called after the component is rendered

Updating

• getDerivedStateFromProps()
• first method that is called when a component gets updated.
• shouldComponentUpdate()
• method you can return a Boolean value that specifies whether React should continue with the rendering or not.
• render()
• method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.
• getSnapshotBeforeUpdate()
• method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.
• componentDidUpdate()
• method is called after the component is updated in the DOM.

Unmounting

• componentWillUnmount 
• method is called when the component is about to be removed from the DOM.