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 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..
|