Component Lifecycle
Lifecycle of Components
- Three phases of the lifecycle of components are Mounting, Updating, and Unmounting.
Mounting
- In Mounting, the instance of the component is created and inserted in DOM.
- It consists of built-in methods : Constructor(), getDerivedStateFromProps() , render(), and componentDidMount().
- constructor() method used to initialize an object from class.
- getDerivedStateFromProps() method is called before rendering the element and It takes state as an argument and return object with changed state.
- render() is the method returns HTML to the DOM.
- componentDidMount() is method where you run statement after the component is rendered.
import React from 'react';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Updating
- In Updating, the Component is updated. whenever there is a change in the component's state or props.
- It consists of built-in method: getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate().
- getDerivedStateFromProps() is method to set state object based on initial props.It is called when a component hets updated.
- shouldComponentUpdate() is method to return a boolean value whether react will continue render or not. The default value is true.
- render() is the method re-render HTML to the DOM after component get updated.
- getSnapshotBeforeUpdate() is method you have to access the props and state before update.
- componentDidUpdate() is method called after the component is updated.
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.favoritecolor;
}
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Unmounting
- It is the final phase of the component cycle.
- It is the method called when a component is being removed from DOM.
- It consists of built-in method: componentWillUnmount().
- componentWillUnmount() is method called when the component is about to removed from DOM.
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
ReactDOM.render(<Container />, document.getElementById('root'));