Chapter 6 – React Component Lifecycle with Example

In this tutorial, you will learn about the component lifecycle. We encourage you to read React Props and React State before jumping into this chapter. Every React component has a lifecycle and goes through a series of lifecycle methods. The lifecycle of the component is divided into 4 phases. Each Phase contains lifecycle methods that are executed in a particular order.

Initialization
Mounting
Updating
Unmounting

Initialization: In this phase, the component is initiated with props and default state. The general place to set the default values is a constructor. The constructor method is called only once and called before any other method.

Mounting: After the initial phase, the component is created and inserted into the DOM. It consists of the following methods.

componentWillMount(): This method is invoked before rendering the components into the DOM. This method is called only once.
render(): The render method returns HTML elements and it will be inserted into the DOM. This method is required.
componentDidMount(): This method is invoked immediately after the component is inserted into the DOM. This method is called only once.

Updating: Component is updated whenever state or props is changed.
It consists of the following methods.

componentWillRecieveProps(newProps) – This method is called as soon as props of a component are updated.
shouldComponentUpdate(nextProps, nextState) – returns boolean value and by default it returns true. This method allows us to determine if the component should be updated or not
componentWillUpdate() – invoked before re-rendering the component
render() – re-renders the component with the updated state and props
componentDidUpdate() – invoked immediately after re-rendering the component

Unmounting: In this phase, the component is unmounted from the DOM. It has only one lifecycle method.

componentWillUnmount() – this method is invoked just before unmounting the component from the DOM. You can use it to perform any clean up such as canceling timers and invalidating event listeners.

NOTE: Only render() is mandatory. All other life cycle methods are optional.

Let’s change our class component as shown below.

class ClassComponentExample extends React.Component {
   constructor(props){
       super(props);
       console.log('CONSTRUCTOR!') 
       this.state = {
           messageB1:"Default Message B - 1",
           messageB2:"Default Message B - 2",
       }
   }
 
   componentWillMount() { 
       console.log('COMPONENT WILL MOUNT!') 
   } 
  
   componentDidMount() { 
       console.log('COMPONENT DID MOUNT!') 
   } 
 
   b1OnClick = () =>{
       this.setState({
           messageB1:"B-1 Button Clicked :)"
       })
   }
   b2OnClick = () =>{
       this.setState({
           messageB2:"B-2 Button Clicked :)"
       })
   }
 
   render() {
       console.log('RENDER!') 
       return {this.props.message}
           {this.state.messageB1}
           {this.state.messageB2}
           
           
       
   }
}

Now do npm start and check your browser console. You can see the logged messages.

As you can see the component contains lifecycle methods from initialization and mounting phase. Let’s add the updating phase and unmounting phase methods after componentDidMount() method.

componentWillReceiveProps(newProps) {   
       console.log('COMPONENT WILL RECIEVE PROPS!')
   }
 
   shouldComponentUpdate(newProps, newState) {
       console.log('SHOULD COMPONENT UPDATE!')
       return true;
   }
 
   componentWillUpdate(nextProps, nextState) {
       console.log('COMPONENT WILL UPDATE!');
   }
 
   componentDidUpdate(prevProps, prevState) {
       console.log('COMPONENT DID UPDATE!')
   }
 
   componentWillUnmount() {
       console.log('COMPONENT WILL UNMOUNT!')
   }

Now refresh the page, click on B1 Button and check the browser console. After clicking the B1 Button updating phase methods are invoked except componentWillReceiveProps() method since the ClassComponentExample is not receiving any new props.

Understanding the component lifecycle is important because lifecycle methods give us better control over the components. You can override any of these lifecycle methods and write your own logic.

Contact Information