[Solved] how to we can remove a component React from the DOM using componentWillUnmount() method? [closed]

Question

“When can I use the following method in my React code? componentWillUnmount()”:

We want to set up a timer whenever the Clock is rendered to the DOM for the first time. This is called “mounting” in React.

We also want to clear that timer whenever the DOM produced by the Clock is removed. This is called “unmounting” in React.

The componentDidMount() method runs after the component output has been rendered to the DOM. This is a good place to set up a timer:

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

We will tear down the timer in the componentWillUnmount() lifecycle method:

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

Essentially the componentWillUnmount() method is used whenever you need to do something before the DOM you are currently seeing will be discarded. In this case the clock will be removed from the DOM, so you want to stop the timer before this happens.

You can read more on lifecycle methods here: https://reactjs.org/docs/state-and-lifecycle.html

Accepted Answer