ReactJS Component Lifecycle

React web apps are a collection of independent components that run according to the interactions made with them. The React component Lifecycle could be thought of as the “Lifetime” of the component. Lifecycle methods are a series of events that take place throughout the birth, growth, and death of a React component.

The three Phases of React Components are:

  • Initialization:

    In this phase, the props and initial state of the component are defined by the developer; this is generally done in the constructor of the component. Here is an example of the initialization stage.

class Clock extends React.Component {
constructor(props)
{
// Calling the constructor of
// Parent Class React.Component
super(props);

// Setting the initial state
this.state = {date : new Date()};
}
}

  • Mounting:

Mounting is the stage in which the instance of a React component is created and inserted in the given DOM. It consists of some methods.

  • componentWillMount() - This is invoked right before a component gets rendered into the DOM. When we call setState() inside this method, the component does not re-render.
  • componentDidMount() - This is invoked after a component gets rendered and placed on the DOM.
  • render() - This method is defined in every component. It returns a single root HTML node element. If we don't want to render anything, we can return a null or false value.

  • Updating:

React is a go-to JS library for creating Active web pages (behave according to their user) easily. Updation is the phase where whenever a change is made to the state or props (events such as clicking, pressing a key on the keyboard, etc) the react component is re-rendered. Methods included are called in the following order when the component is being re-rendered:

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapShotBeforeUpdate()
  • componentDidUpdate()

componentWillReceiveProps(newProps) {
if (this.props !== newProps) {
console.log("New Props have been assigned.");
// Use this.setState() to rerender the page.
}
}

  • Unmounting:

    The next phase in the life-cycle is when a component is removed from the DOM, or unmounting as React does.

React has one built-in method that gets called when a component is unmounted:

  • componentWillUnmount() - This method is called when the component is about to be removed from the DOM.

import React, { Component } from 'react'
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {hello: "Welcome to PLG Works"};
    this.changeState = this.changeState.bind(this)
  }  
  render() {
    return (
        <div>
            <h1>ReactJS component's Lifecycle</h1>
            <h3>{this.state.hello}</h3>
            <div>
              <button onClick = {this.changeState}>Get in touch</button>        
            </div>
        </div>
    );
  }
  componentWillMount() {
    console.log('Component Will MOUNT!')
  }
  componentDidMount() {
    console.log('Component Did MOUNT!')
  }
  changeState(){
    this.setState({hello:"Let's build something great together, Hit us up."});
  }
  componentWillReceiveProps(newProps) {    
    console.log('Component Will Receive 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; 


Result:

Parv Saxena

Parv Saxena