Class Component’s lifecycle methods.

Each component in React has a lifecycle that you can monitor and manipulate during its three main phases.

Mounting

Mounting means putting elements into the DOM.

Constructor():-

the constructor method is called by React, every time you make a component this method is called.

It takes the props as an argument and you should always start by calling the super(props) before anything else.

constructor(props) {
super(props);
this.state = {favoritecolor: “red”};
}

getDerivedStateFromProps():

this method is called right Before the render method. It takes the state as an argument and returns an object with a change in the “state”.

ex:

constructor(props) {};

static getDerivedStateFromProps(props, state) {
return {
favoritecolor: props.favor };
}

render():

this method is required and is the method that actually outputs the HTML to the DOM.

componetDidMount:

is executed after the first render only on the client side.

ex

componentDidMount(){
setTimeout(()=>{
this.setState({ favorite color : “red”};
},1000)
}

Update

A component is updated whenever there is a change in the component’s “state” or “props”

getDeriveStateFromProps():

this is the first method that is called when a component gets updated.

shouldComponentUpdate():

this method returns true or false, determining whether the component will be updated.

ex

shouldComponetnUpdate(){
return false;
}

render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

getSnapshotBeforeUpdate(): a method called right after the update.this method allows you to access the props and state before the update. you always use this method with componentDidUpdate() otherwise you will get an error.

use the getSnapshotBeforeUpdate() method to find out what state object locked the update.

getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById(“div1”).innerHTML =
“Before the update, the favorite was “ + prevState.favoritecolor;
}

componentWillUpdate(): is called just before rendering.

componentDidUpdate(): is called just after rendering.

componentDidUpdate() {
document.getElementById(“mydiv”).innerHTML=
“The updated favorite is “ + this.state.favoritecolor;
}

componentWillUnmount(): is called after the component is unmounted from the dom and is about to be removed from the DOM.

import React from ‘react’;
import ReactDOM from ‘react-dom’;

class Test extends React.Component {
constructor(props){
super(props);
this.state = { hello : “World!” };
}

componentWillMount(){
console.log(“componentWillMount()”);
}

componentDidMount(){
console.log(“componentDidMount()”);
}

changeState(){
this.setState({ hello : “Geek!” });
}

render(){
return (<div><h1>GeeksForGeeks.org, Hello{ this.state.hello }</h1>
<h2><a onClick={this.changeState.bind(this)}>Press Here!</a></h2>
</div>)
;}

shouldComponentUpdate(nextProps, nextState){
console.log(“shouldComponentUpdate()”);
return true;
}
componentWillUpdate(){
console.log(“componentWillUpdate()”);
}

componentDidUpdate(){
console.log(“componentDidUpdate()”);
}
}

ReactDOM.render(<Test />,document.getElementById(‘root’));

one of the best videos for understanding class component’s lifecycle method