Open In App

Explain the meaning of Mounting and Demounting

Improve
Improve
Like Article
Like
Save
Share
Report

Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence. Mounting and Unmounting refer to key lifecycle phases that occur during the creation and removal of components or elements in a web application.

Prerequisites:

Table of Content:

Mounting:

Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. The mounting phase consists of two predefined functions as described below.

componentWillMount() : As the name clearly suggests, this function is invoked right before the component is mounted on the DOM i.e. this function gets invoked once before the render() function is executed for the first time.

Steps to create the application

Step 1: Create a React application using the following command:

npx create-react-app functiondemo

Step 2: After creating your project folder i.e. functiondemo, move to it using the following command:

cd functiondemo

Project Structure:

Example: Now write down the following code in the App.js file.

App.js




import React from "react";
 
class ComponentOne extends React.Component {
  UNSAFE_componentWillMount() {
    console.log("Component is mounted in the DOM");
  }
  render() {
    return <h1>Hello Geeks!</h1>;
  }
}
 
class App extends React.Component {
  render() {
    return (
      <div>
        <ComponentOne />
      </div>
    );
  }
}
 
export default App;


Output:

Mounting

componentDidMount(): Similarly as the previous one this function is invoked right after the component is mounted on the DOM i.e. this function gets invoked once after the render() function is executed for the first time

Example: This example implements the componentDidMount() method in the App.js file

App.js




import React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
 
        // Initializing the state
        this.state = { color: "lightgreen" };
    }
    componentDidMount() {
        // Changing the state after 2 sec
        // from the time when the component
        // is rendered
        setTimeout(() => {
            this.setState({ color: "wheat" });
        }, 2000);
    }
    render() {
        return (
            <div>
                <p
                    style={{
                        color: this.state.color,
                        backgroundColor: "rgba(0,0,0,0.88)",
                        textAlign: "center",
                        paddingTop: 20,
                        width: 400,
                        height: 80,
                        margin: "auto",
                    }}
                >
                    GeeksForGeeks
                </p>
            </div>
        );
    }
}
export default App;


Output:

componentDidMount

Demounting:

This is the final phase of the lifecycle of the component that is the phase of unmounting the component from the DOM. The following function is the sole member of this phase.

componentWillUnmount() : This function is invoked before the component is finally unmounted from the DOM and this denotes the end of the lifecycle. All the cleanups such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount() should be coded in the componentWillUnmount() method block.

Example: This example implements the componentDidUnmount() method in the App.js file

App.js




import React from "react";
class ComponentOne extends React.Component {
    // Defining the componentWillUnmount method
    componentWillUnmount() {
        alert("The component is going to be unmounted");
    }
 
    render() {
        return <h1>Hello Geeks!</h1>;
    }
}
 
class App extends React.Component {
    state = { display: true };
    delete = () => {
        this.setState({ display: false });
    };
 
    render() {
        let comp;
        if (this.state.display) {
            comp = <ComponentOne />;
        }
        return (
            <div>
                {comp}
                <button onClick={this.delete}>
                    Delete the component
                </button>
            </div>
        );
    }
}
 
export default App;


Output:

Demounting

Conclusion:

Mounting and Unmounting are the fundamental concepts in web development, especially in component-based frameworks. This is very important to understand this for handling component initialization, rendering, and cleanup processes effectively. By mastering Mounting and Unmounting, developers can create more efficient, maintainable, and performant web applications by managing component lifecycles effectively.



Last Updated : 23 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads