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