componentWillUnmount method

React Unmounting componentWillUnmount Method | Components Lifecycle

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.

Explore to Understand  - React Lifecycle Components

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>
    );
  }
}

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^