Component Life Cycle in ReactJS

by

React Component Life-Cycle

Each process of component creation in ReactJS involves different lifecycle methods, also known as the component’s lifecycle. They may be easily called at various points during a component’s life, as they are not very complicated in nature. The four different phases of the lifecycle of the component are the Initial Phase, the Mounting Phase, the Updating Phase and the Unmounting Phase. Each of these phases can be distinguished on the basis of their specific lifecycle methods.

 

The Initial Phase:

Also known as the birth phase of the lifecycle of a ReactJS component, at this phase, the component starts its journey on the way to the DOM. The initial phase only occurs once and in this phase, a component contains the default Props and initial State. The initial phase consists of the following methods:

  • getDefaultProps() method: It is used to set the default props before any interaction occurs, and thus it specifies the default value of this.props.
  • getInitialState() method: It is used to set an initial state before any interaction occurs, and thus it specifies the default value of this.state.

 

The Mounting Phase:

The instance of a component is created and inserted into the DOM in the mounting phase of the lifecycle of a ReactJS component. The mounting phase consists of the following methods:

  • componentWillMount() method: It is used to avoid the re-render of the component on calling the setState() method and thus is invoked immediately before a component gets rendered into the DOM.
  • componentDidMount() method: It is used for DOM querying operations and thus is invoked immediately after a component gets rendered and placed on the DOM.
  • render() method: It is used for returning a single root HTML node element and thus is defined in each and every component.

 

The Updating Phase:

The new Props and change State options are available in the updating phase of the lifecycle of a ReactJS component. Handling user interaction and providing communication with the components hierarchy are also the features of this phase. It is a repeatable phase which ensures that the component is displaying the latest version of itself. The updating phase consists of the following methods:

  • componentWillRecieveProps() method: It is used to invoke when a component receives new props.
  • shouldComponentUpdate() method: It is used to control the component’s behaviour of updating itself and is thus invoked when a component decides any changes/updates to the DOM.
  • componentWillUpdate() method: It is used to restrict the change in the component state by invoking this.setState() method, and is thus invoked just before the component updating occurs.
  • render() method: It is used to examine this.props and this.state. It is invoked to return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number.
  • componentDidUpdate() method: It is used to execute code once the updating occurs and is thus invoked immediately after the component updating occurs.

 

The Unmounting Phase:

Also known as the final phase of the lifecycle of a ReactJS component, this phase is called when a component instance is destroyed and unmounted from the DOM. The Unmounting phase consists of one method:

  • componentWillUnmount() method: It is used to perform any necessary cleanup related task such as invalidating timers, event listener, cancelling network requests, or cleaning up DOM elements, and is thus invoked immediately before a component is destroyed and unmounted permanently.

 
Example: 

import React, { Component } from 'react';  
class App extends React.Component {  
constructor(props) {  
super(props);  
this.state = {msg: "World"};  
this.changeState = this.changeState.bind(this)  
}    
render() {  
return (  

  

Lifecycle
  

Hello {this.state.msg}
  
          

  
);  
}  
componentWillMount() {  
console.log('Action: Component Will MOUNT!')  
}  
componentDidMount() {  
console.log('Action: Component Did MOUNT!')  
}  
changeState(){  
this.setState({msg:"A beautiful day ahead."});  
}  
componentWillReceiveProps(newProps) {      
console.log('Action: Component Will Receive Props!')  
}  
shouldComponentUpdate(newProps, newState) {  
return true;  
}  
componentWillUpdate(nextProps, nextState) {  
console.log('Action: Component Will UPDATE!');  
}  
componentDidUpdate(prevProps, prevState) {  
console.log('Action: Component Did UPDATE!')  
}  
componentWillUnmount() {  
console.log('Action: Component Will UNMOUNT!')  
}  
}  
export default App;

Output 1: Before the button click.