In Reactjs Class Component, if you have to manipulate DOM and you have to control the DOM so you have to use life cycle methods.
In class component there are three phases of life cycle:-
- Mounting
- Updating
- Unmounting
1.Mounting :-
Mounting means if you change or add element in DOM, then you have used mounting. There are four methods in mounting:-
- constructor()
- componentDidMount()
- getDerivedStateFromProps()
- render()
(1)constructor () :-
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Enliven"};
}
render() {
return <h1>Hello {this.state. name}</h1>;
}
}
export default App;
In above example, the constructor() method should run first before all other codes execute.
In the constructor you will see the super() method. The super method will get all the data from parent class like methods and properties.
Whenever the state changes, the DOM instantly catches the value of the state and displays the output.
After you see the rendor() function, this function checks your state, whether it is updated or changed, then this function re-renders the current component and displays the updated output in your display.
(2)componentDidMount () :-
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Hello World"};
}
componentDidMount() {
setTimeout(() => {
this.setState({name: "Enliven"})
}, 1000)
}
render() {
return <h1>Hello {this.state. name}</h1>;
}
}
export default App;
In above example, the componentDidMount() runs after the render() method.
(3)getDerivedStateFromProps () :-
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Hello World"};
}
static getDerivedStateFromProps(props, state) {
return { name: “Enliven” };
}
render() {
return <h1>Hello {this.state. name}</h1>;
}
}
export default App;
In above code you see the getDerivedStateFromProps() method. This method calls before your code does render.
(4)render () :-
Render method calls when your state changes or updates or add. This will re-render your component and display the output.
Note: – Checkout the constructor method to see the render() code.
2.Updating :-
Updating means when your state or props update the current value.
In updating there are three methods:-
- componentDidUpdate()
- shouldComponentUpdate()
- getSnapshotBeforeUpdate()
(1)componentDidUpdate () :-
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Hello World"};
}
componentDidMount() {
setTimeout(() => {
this.setState({name: "Enliven"})
}, 1000)
}
componentDidUpdate() {
console.log(“Component Update Successful.”);
}
render() {
return <h1>Hello {this.state. name}</h1>;
}
}
export default App;
In above code you see the ComponentDidUpdate (), this method runs when your props or state changes.
You see we used componentDidMount() method because when our component is ready then we call the componentDidMount() method, in which we use SetTimeout function to change our state value after 1 second. Then after componentDidUpdate() will automatically run and console the message.
(2)shouldComponentUpdate () :-
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Hello World"};
}
shouldComponentUpdate(){
return false;
}
changeName=()=>{
this.setState({name:"Hello Enliven"});
}
render() {
return
<div>
<h1>Hello {this.state. name}</h1><br>
button type="button" onclick={this.changeName}>Change Name</button>
</div>;
}
}
export default App;
In above code you can see the shouldComponentUpdate(). This method runs when your component re-renders and this method can return Boolean Value when you change state. If the Boolean value is true, your component re-renders and if your return value is false, it will stop the execution and will not render the component.
In above code you can see the Hello output and one button. This button changes the name when we click the button. When shouldComponentUpdate() method runs, if the argument is true, it runs the next code. And if the argument is false, it stops the code.
(3)getSnapshotBeforeUpdate() :-
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Hello World"};
}
getSnapshotBeforeUpdate(prevProps,prevState){
console.log(prevState.name);
}
changeName=()=>{
this.setState({name:"Hello Enliven"});
}
render() {
return
<div>
<h1>Hello {this.state. name}</h1><br>
button type="button" onclick={this.changeName}>Change Name</button>
</div>;
}
}
export default App;
In above code you can see the getSnapshotBeforeUpdate(). This Method runs when your State changes, this will get all old state value. This method has two arguments, first argument is when our Props change we use prevProps and second argument is when our state changes we use prevState.
This two argument will store old value when we change state or props.
In above code, when we click on the button, the getSnapshotBeforeUpdate() method will give the old data value from state.
3.Unmounting :-
Unmounting refers to the event when our Component is removed from the DOM.
In Unmounting, there is only one method: componentWillUnmount()
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Hello World"};
}
delHeader = () => {
this.setState({name:"Hello Enliven"});
}
changeName=()=>{
this.setState({name:"Hello Enliven"});
}
render() {
return
<div>
<h1>Hello {this.state. name}</h1><br>
<button type="button" onclick={this.delHeader}>Delete Name</button>
</div>;
}
}
Class Child extends React.Component{
componentWillUnmount(){
alert(“Component Removed”);
}
render(){
return(
<h1>Hello World</h1>
);
}
}
export default App;
In above code you see the two component, one is app and second is child. The child component displays the alert message when first component deletes the state, and the componentWillUnmount() method will execute.
