Describe about the React Lifecycle? | React LifeCycle | React Tutorial

React LifeCycle | React Tutorial

As we know everything goes through a cycle of taking birth, growing, and death the same goes with React. In React, components are basic building blocks of react. So, it's important to know about the different stages involved in the lifecycle of a react component. There are four different phases involved in the lifecycle of a react component:

1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase

1. Initial Phase:

In this phase, a component defines the default Props and initial State. This initial phase only occurs once and consists of the getDefaultProps() and getInitialState() methods.

2. Mounting Phase:

After the initialization is completed, mounting is the phase of the react lifecycle that comes. The mounting means to put elements into the DOM and the component is rendered on a webpage. The mounting has five methods which are:

1. constructor(): This constructor() method is called before anything else, whenever the component is initiated. Using this we can set up the initial state and other initial values.
2. getDerivedStateFromProps(): This getDerivedStateFromProps() method of mounting phase is called right before rendering the element(s) in the DOM. And here we set the state object based on the initial props. This method takes the state as an argument and returns an object with changes to the state.
3. render(): This render() method of Mounting phase that actually outputs the HTML to the DOM.
4. componentDidMount(): This componentDidMount() method is called just after the component is placed on the DOM.
5. compnentWillMount(): This compnentWillMount() method of the Mounting phase is called just before the component is placed on the DOM. 

It is clearly understood that "Will" is used for before a particular event and "did" is used in case of after a particular event.

3. Updating Phase:

This is the next phase in the lifecycle is when a component is updated. In this Updating phase where the state and properties populated at the time of initialization are changed if required after some user events. The following are different inbuilt functions invoked during updation phase :

1. shouldComponentUpdate(): This lifecycle method is used when we want your state or props to update or not. This method returns a boolean value is true or false. 
2. componentWillUpdate(): This method is called just before the component is placed on DOM and this method is called once before the render function is executed post updation.
3. componentWillReceiveProps(): The componentWillReceiveProps() function is independent of component state. It is called before a component that is mounted on DOM gets its props reassigned. The componentWillReceiveProps() function accepts new props which can be identical or different from original props. Mostly here some pre-rendering checks can be applied in this step.
4. componentDidUpdate(): The componentDidUpdate() method is called after the component is updated in DOM. And this is the best place in updating the DOM in response to the change of props and state.

4. Unmounting Phase:

Unmounting is the final or the end of the react's lifecycle, a component is detached from the DOM container. React has only one built-in method that gets called whenever a component is unmounted.

1. componentWillUnmount(): This componentWillUnmount() function of Unmounting phase is invoked before a component is finally detached from the DOM container is this method is called when a component is fully removed from the page then this shows the end of its lifecycle.

Example of the lifecycle of React components:

import React, { Component } from 'react';  
  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {msg: "Developers!"};  
      this.changeState = this.changeState.bind(this)  
   }    
   render() {  
      return (  
         <div>  
             <h1>EAT! SLEEP! CODE! REPEAT</h1>  
             <h3>Hello {this.state.msg}</h3>  
             <button onClick = {this.changeState}>Click this button!</button>          
         </div>  
      );  
   }  
   componentWillMount() {  
      console.log('Component Will MOUNT!')  
   }  
   componentDidMount() {  
      console.log('Component Did MOUNT!')  
   }  
   changeState(){  
      this.setState({msg:"We welcome you in this fun learning session with us!"});  
   }  
   componentWillReceiveProps(newProps) {      
      console.log('Component Will Recieve Props!')  
   }  
   shouldComponentUpdate(newProps, newState) {  
      return true;  
   }  
   componentWillUpdate(nextProps, nextState) {  
      console.log('Component Will UPDATE!');  
   }  
   componentDidUpdate(prevProps, prevState) {  
      console.log('Component Did UPDATE!')  
   }  
   componentWillUnmount() {  
      console.log('Component Will UNMOUNT!')  
   }  
}  
export default App;  ​

Ouput: