In React, each component has a life-cycle which
manipulate during its three main phases.
The following three phases are:
1. Mounting
2. Updating
3. Unmounting
React does so by “Mounting” (adding nodes to the DOM), “Unmounting” (removing them from the DOM), and “Updating” (making changes to nodes already in the DOM).
Mounting - Lifecycle Phase 1
Mounting is used for adding nodes (elements) to
the DOM.
The React has four built-in methods that gets called, in this order, when mounting a
component -
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()
Note
–
1) The
render() method is required and It
always be called and the others methods are optional (you will call if needed of
them).
2) These
methods are considered legacy and you should avoid them in new code:
· UNSAFE_componentWillMount()
The Constructor Method -
The constructor()
method is called when the component is initiated (before anything else). Here
we can set up the initial state and other initial values.
The constructor()
method is called with the props, as arguments and we should always start by
calling the super(props) before
initiated anything else.
As
an Example,
import React from 'react';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {msg: "welcome!"};
}
render() {
return (
<h2>{this.state.msg} you anil</h2>
);
}
}
The getDerivedStateFromProps Method -
The getDerivedStateFromProps()
method is called before rendering the elements in the DOM.
The getDerivedStateFromProps()
method is called right before the render method and after the constructor
method.
We can set the state object based on the initial
props and it takes state as an argument, and returns an object with changes to
the state.
We can update the constructor state in the getDerivedStateFromProps() method.
As
an Example,
public class Header extends React.Component {
constructor(props) {
super(props);
this.state = {msg: "welcome!"};
}
static getDerivedStateFromProps(props, state) {
return {msg: props.yourMsg };
}
render() {
return (
<h1>{this.state.msg} you anil</h1>
);
}
}
The Render Method -
The render
() method is used to display the actual outputs HTML to the DOM.
The render
() method is required and this method has to return something whether it is
null.
When
Render method is called?
When render method is called it returns a new
virtual DOM structure of the component.
As
an Example,
import React from 'react';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {msg: "welcome!"};
}
render() {
return (
<h2>{this.state.msg} you anil</h2>
);
}
}
As an another Example,
public class Header extends React.Component {
render() {
return (
<h2>This one is a Header component</h2>
);
}
}
The componentDidMount Method -
The componentDidMount method is called after the
component is rendered.
The componentDidMount method is called exactly
once and when The component has been initialized.
The componentDidMount method is used for -
1. Handling
the AJAX requests - GET/POST/PUT/DELETE
2. Set
timers using setTimeout or setInterval
3. Set
timers using setInterval
As
an Example,
public class Header extends React.Component {
constructor(props) {
super(props);
this.state = {msg: "welcome!"};
}
componentDidMount() {
setTimeout(() => {
this.setState({msg: "welcome you Anil"})
}, 1000)
}
render() {
return (
<h2>{this.state.msg}</h2>
);
}
}
Updating - Lifecycle Phase 2
A component is updated whenever there is a change
in the component's state or props.
These methods are called in the following order
when a component is being re-rendered:
1) getDerivedStateFromProps()
2) shouldComponentUpdate()
3) render()
4) getSnapshotBeforeUpdate()
5) componentDidUpdate()
Note:
1) The
render() method is required and will always be called, the others are optional
and will be called if you define them.
2) These
methods are considered legacy and you should avoid them in new code:
o
UNSAFE_componentWillUpdate()
o
UNSAFE_componentWillReceiveProps()
The getDerivedStateFromProps Method -
The getDerivedStateFromProps() method is called
first when a component gets updated. This is still the natural place to set the
state object based on the initial props.
After changes the color to blue, but since the
getDerivedStateFromProps() method is called, which updates the state with the
color from the color attribute, the color is still rendered as yellow.
See the
below example,
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
static getDerivedStateFromProps(props, state) {
return {color: props.color };
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>Your Color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change this color</button>
</div>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
Result
of this example is – Your color is Yellow
The shouldComponentUpdate Method -
The shouldComponentUpdate()
method is invoked before rendering (render method) when new props or state are
being received.
The defaults value is true.
The shouldComponentUpdate()
method is not called for the initial render or when forceUpdate() is used.
As
an Example 1–
When
shouldComponentUpdate value is fale? My Color is red after click on Change color.
import React from 'react';
import ReactDOM from 'react-dom';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My Color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Result
of this example is – My color is red
As
an Example 2–
When
shouldComponentUpdate value is true? My Color is blue after click on Change color.
import React from 'react';
import ReactDOM from 'react-dom';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
shouldComponentUpdate() {
return true;
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My Color is {this.state.color}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Result
of this example is – My color is blue
The Render Method -
The render() method is the only required method
in a class component.
The render() method is called when a component
gets updated and re-render the HTML to the DOM including the new changes.
Note:
The render() will not be invoked if shouldComponentUpdate() returns false.
As
an Example,
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {color: "red"};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h2>My Color is {this.state.color}</h2>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
Result
of this example is – My color is blue
The getSnapshotBeforeUpdate Method -
The getSnapshotBeforeUpdate() method is invoked
right before calling the render method, both on the initial mount and on
subsequent updates. It should return an object to update the state, or null to
update nothing.
If the getSnapshotBeforeUpdate() method is
present, you should also include the componentDidUpdate() method, otherwise you
will get an error.
The componentDidUpdate Method
-
The componentDidUpdate() method is called after
the component is updated in the DOM. This method is not called for the initial
render
Note:
The componentDidUpdate() will not be invoked if shouldComponentUpdate() returns
false.
Unmounting - Lifecycle Phase 3
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.
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>
);
}
}