Component Lifecycle

In the React Application, every component has its lifecycle that defined as the no. of methods that are used in different stages of the Component. Most importantly its making process has various lifecycle methods. According to that, there are mainly four phases of component Lifecycle where every phase has specific methods. React provides the developer with a set of pre-defined function and override the functions with desired logic to execute accordingly.

They are as follows:

• Initial Phase
• Mounting Phase
• Updating Phase
• Unmounting Phase

Initial Phase

It is also called as Initialization. It is a birth phase of the component lifecycle and it will occur only once. In this phase, component contains props and initial state that has done in the constructor of the component. There consists of 2 methods:

• getDefaultProps(): In this method, it specifies the default value of props.
• getInitialState(): In this method, it specify the default value of this.state

Mounting Phase

Mounting is the second stage of the component lifecycle when the statement of the component is finished and the part is mounted on the DOM and rendered without precedent for the site page.

It consists of the following methods:

• componentWillMount(): A component gets rendered into the DOM before it invoked immediately.
• componentDidMount(): A component gets rendered and placed on the DOM after it invoked.
• render(): It is responsible to define every component whenever it renders the component it returns HTML node else if you don’t render it will return a null value.

Updating Phase

It is a third phase of the React component Lifecycle. This phase permits us to deal with client connection and give correspondence to the component progression. The primary point of this phase is to guarantee that the part is showing the most recent variant of itself. Not at all like the Birth or Death stage, this stage rehashes and once more. It consists of the following methods:

• componetWillRecieveProp(): This method started whenever the component receives new props. If you want to update, as compare to this.prop and next.Props to perform state transition.
• shouldComponentUpdate(): It started when a component has any updation to the DOM. It has a quality to control the updation to itself. Let take a case if the method returns true then the updation may be done else it skips it.
• componentWillUpdate(): This method started before the updation occurs. There is a condition also you cant change the component state.
• componentDidUpdate(): It started after the updation done.

Unmounting Phase

It is the fourth and final stage of the Lifecycle of a component. In this phase, there is an unmounting of the component from the DOM. They consist of only one method:

• componentWillUnmount(): This method started when the component is unmounted or destroyed completely. As the component unmounted, you can’t mount it again. It also provides some cleanup related tasks.

Let take one final example to finish the article while covering what’s discussed above.

import React, { Component } from 'react';  
  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {hello: "   "};  
      this.changeState = this.changeState.bind(this)  
   }    
   render() {  
      return (  
         <div>  
             <h1>Tutorial Link</h1>  
             <h3>   {this.state.hello}</h3> 
             <button onClick = {this.changeState}>Click Here!!</button>          
         </div>  
      );  
   }  
   
   componentWillMount() {  
      console.log('Component Will MOUNT!')  
   }  
     
   changeState(){ 
      this.setState({hello: "Tutorials link is an online community for IT professionals and provides a comprehensive set of resources like Articles, Videos, and Ebooks on various topics. Tutorials link is an online community for IT professionals and provides a comprehensive set of resources like Articles, Videos, and Ebooks on various topics. Tutorialslink.com is also an online learning platform that helps anyone to learn software, technology, and creative skills to achieve personal and professional goals."});  
   }     
   componentWillUnmount() {  
      console.log('Component Will UNMOUNT!')  
   }  
}  
export default App; 

Output is :