Component’s lifecycle methods in ReactJS

In this article, we are going to explore the life-cycle methods of React JS. But, before moving ahead to React’s different life-cycle methods, we should understand what it is.

We are born, grow, and then die. Almost everything follows this cycle in its life, and React components do as well. Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle.

There are different lifecycle methods that React provides at different phases of a component’s life

Four phases of a React component

The React component, like anything else in the world, goes through the following phases

Initialization

Mounting

Update

Unmounting

The following image is the visual representation of the phases and the methods of ReactJs lifecycle.

• Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.

         The component is setting up the initial state in the constructor, which can be changed           later by using the set method.

      

    class Initialize extends React.Component {  constructor(props)
    {
    // Calling the constructor of
    // Parent Class React.Component
    super(props);
    // initialization process
    this.state = {
       date : new Date(),
       clickedStatus: false
     };
}

  

               

• Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.

• componentWillMount is executed before rendering, on both the server and the client side.
• componentDidMount is executed after the first render only on the client side. This is where AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks and any functions with delayed execution such as setTimeout or setInterval. We are using it to update the state so we can trigger the other lifecycle methods.
• 
  

class LifeCycle extends React.Component {
  componentWillMount() {
      console.log('Component will mount!')
   }
  componentDidMount() {
      console.log('Component did mount!')
      this.getList();
   }
  getList=()=>{
   /*** method to make api call***
  }
  render() {
      return (
         <div>
            <h3>Hello mounting methods!</h3>
         </div>
      );
   }
}

• Updating: Updating is the stage when the state of a component is updated and the application is repainted.

• shouldComponentUpdate should return true or false value. This will determine if the component will be updated or not. This is set to true by default. If you are sure that the component doesn't need to render after state or props are updated, you can return false value.
• componentWillUpdate is called just before rendering.
• componentDidUpdate is called just after rendering.
• 
  

• Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

         componentWillUnmount()

         This method is called before the unmounting of the component takes place. Before                removal of the component from the DOM, ‘componentWillUnMount’ executes.This              method denotes the end of the component’s lifecycle.

Thanks!!!