Skip to main content

React Lifecycle Components | Mounting, Updating, Unmounting

In React, each component has a life-cycle which manipulate during its three main phases.

The following three phases are:
1.      Mounting
2.      Updating
3.      Unmounting

React does so by “Mounting” (adding nodes to the DOM), “Unmounting” (removing them from the DOM), and “Updating” (making changes to nodes already in the DOM).


Mounting - Lifecycle Phase 1
Mounting is used for adding nodes (elements) to the DOM.

The React has four built-in methods that gets called, in this order, when mounting a component -
1.      constructor()
2.      getDerivedStateFromProps()
3.      render()
4.      componentDidMount()

Note
1)      The render() method is required and It always be called and the others methods are optional (you will call if needed of them).
2)      These methods are considered legacy and you should avoid them in new code:
·       UNSAFE_componentWillMount()

The Constructor Method -
The constructor() method is called when the component is initiated (before anything else). Here we can set up the initial state and other initial values.

The constructor() method is called with the props, as arguments and we should always start by calling the super(props) before initiated anything else.

As an Example,
import React from 'react';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }
  render() {
    return (
      <h2>{this.state.msg} you anil</h2>
    );
  }
}

The getDerivedStateFromProps Method -
The getDerivedStateFromProps() method is called before rendering the elements in the DOM.

The getDerivedStateFromProps() method is called right before the render method and after the constructor method.

We can set the state object based on the initial props and it takes state as an argument, and returns an object with changes to the state.

We can update the constructor state in the getDerivedStateFromProps() method.

As an Example,
public class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }

  static getDerivedStateFromProps(propsstate) {
    return {msg: props.yourMsg };
  }

  render() {
    return (
      <h1>{this.state.msgyou anil</h1>
    );
  }
}

The Render Method -
The render () method is used to display the actual outputs HTML to the DOM.
The render () method is required and this method has to return something whether it is null.

When Render method is called?
When render method is called it returns a new virtual DOM structure of the component.

As an Example,
import React from 'react';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }
  render() {
    return (
      <h2>{this.state.msg} you anil</h2>
    );
  }
}

As an another Example,

public class Header extends React.Component {
  render() {
    return (
      <h2>This one is a Header component</h2>
    );
  }
}


The componentDidMount Method -
The componentDidMount method is called after the component is rendered.
The componentDidMount method is called exactly once and when The component has been initialized.

The componentDidMount method is used for -
1.      Handling the AJAX requests - GET/POST/PUT/DELETE
2.      Set timers using setTimeout or setInterval
3.      Set timers using setInterval

As an Example,
public class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {msg: "welcome!"};
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({msg: "welcome you Anil"})
    }, 1000)
  }

  render() {
    return (
      <h2>{this.state.msg}</h2>
    );
  }
}

Updating - Lifecycle Phase 2
A component is updated whenever there is a change in the component's state or props.

These methods are called in the following order when a component is being re-rendered:
1)      getDerivedStateFromProps()
2)      shouldComponentUpdate()
3)      render()
4)      getSnapshotBeforeUpdate()
5)      componentDidUpdate()

Note:
1)      The render() method is required and will always be called, the others are optional and will be called if you define them.
2)      These methods are considered legacy and you should avoid them in new code:
o   UNSAFE_componentWillUpdate()
o   UNSAFE_componentWillReceiveProps()

The getDerivedStateFromProps Method -
The getDerivedStateFromProps() method is called first when a component gets updated. This is still the natural place to set the state object based on the initial props.

After changes the color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the color attribute, the color is still rendered as yellow. 

See the below example,

class Header extends React.Component {
    constructor(props) {
      super(props);
      this.state = {color: "red"};
    }

    static getDerivedStateFromProps(propsstate) {
      return {color: props.color };
    }

    changeColor = () => {
      this.setState({color: "blue"});
    }

    render() {
      return (
        <div>
        <h1>Your Color is {this.state.color}</h1>
        <button type="button" onClick={this.changeColor}>Change this color</button>
        </div>
      );
    }
  }
  
  ReactDOM.render(<Header favcol="yellow"/>document.getElementById('root'));


Result of this example is – Your color is Yellow

The shouldComponentUpdate Method -
The shouldComponentUpdate() method is invoked before rendering (render method) when new props or state are being received.

The defaults value is true.

The shouldComponentUpdate() method is not called for the initial render or when forceUpdate() is used.

As an Example 1–

When shouldComponentUpdate value is fale? My Color is red after click on Change color.

import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {color: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Color is {this.state.color}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />document.getElementById('root'));


Result of this example is – My color is red

As an Example 2–

When shouldComponentUpdate value is true? My Color is blue after click on Change color.

import React from 'react';
import ReactDOM from 'react-dom';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {color: "red"};
  }

  shouldComponentUpdate() {
    return true;
  }

  changeColor = () => {
    this.setState({color: "blue"});
  }

  render() {
    return (
      <div>
      <h1>My Color is {this.state.color}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />document.getElementById('root'));


Result of this example is – My color is blue

The Render Method -
The render() method is the only required method in a class component.

The render() method is called when a component gets updated and re-render the HTML to the DOM including the new changes.

Note: The render() will not be invoked if shouldComponentUpdate() returns false.

As an Example,
class Header extends React.Component {
    constructor(props) {
      super(props);
      this.state = {color: "red"};
    }
    changeColor = () => {
      this.setState({color: "blue"});
    }
    render() {
      return (
        <div>
            <h2>My Color is {this.state.color}</h2>
            <button type="button" onClick={this.changeColor}>Change color</button>
        </div>
      );
    }
  }

Result of this example is – My color is blue

The getSnapshotBeforeUpdate Method -
The getSnapshotBeforeUpdate() method is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

The componentDidUpdate Method -
The componentDidUpdate() method is called after the component is updated in the DOM. This method is not called for the initial render

Note: The componentDidUpdate() will not be invoked if shouldComponentUpdate() returns false.

Unmounting - Lifecycle Phase 3
The Unmounting is used when a component is removed from the DOM.

React has only one built-in method that is called when a component is unmounted.
1.      componentWillUnmount

The componentWillUnmount Method -
The componentWillUnmount() method is called when the component is removed from the DOM.

As an Example,
// container class
public class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }

  deleteHeader = () => {
    this.setState({show: false});
  }

  render() {
    let header;
    if (this.state.show) {
      header = <Child />;
    };
    return (
      <>
      <div>
        <p>{header}</p>
        <button type="button" onClick={this.deleteHeader}>Delete My Header</button>
      </div>
    );
  }
}

//Child class
public class Child extends React.Component {
  componentWillUnmount() {
    console.log("This component Header is unmounted.");
  }

  render() {
    return (
      <h1>Hello Anil!</h1>
    );
  }
}

By Anil Singh | Rating of this article (*****)

Popular posts from this blog

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1:   To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue  import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = {   providers: [ provideRouter(routes),  provideClientHydration(), provideHttpClient ()      ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from ...

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin...

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVA...

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan ...

55 Best TypeScript Interview Questions and Answers - JavaScript!

What Is TypeScript? By definition, "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript." TypeScript is a superset of JavaScript which provides optional static typing, classes and interfaces. => The TypeScript was first made public in the year 2012. => Typescript is a modern age JavaScript development language. => TypeScript is a strongly typed, object oriented, compiled language. => TypeScript was designed by Anders Hejlsberg (designer of C#) at Microsoft. => TypeScript is both a language and a set of tools. As an Example of TypeScript, class Hello {     msg : string ;      constructor ( message : string ) {          this . msg = message ;      }       getMsg () {          return "Hello, " + this . msg ;      } } TypeScript introduced a great deal...