Lifecycle methods which are called when component initialised.
Constructor is used to set initial state for component. for example in Counter component initial state of count is 0.
constructor(props) {
this.state = {
count: 0
};
}This method will be called before component render to screen.
In this method you will see component on Screen. this method should be pure. Do not update state in this method.
This method will be called right after the render method. updating state in this method will re-render component.
This method is called whenever component recieves new props.
Note: this method is called several time. it is better to compare new props with old one.
componentWillReceiveProps(nextProps){
if (JSON.stringify(this.props.month) !== JSON.stringify(nextProps.month)){
// component recived new props.
}
}In this method you can check whether re-rendering the component is neccessary or not. return false if you don't want to re-render component.
shouldComponentUpdate(nextProps, nextState){
// return a boolean value
return true;
}This method will be called after should Component Update(only if it returns true).
In this method updated component will be rendered to screen. with new data(or changes).
component Did Update will be called after render method.
import React, { Component } from 'react';
class Lifecycle extends Component {
constructor(props) {
console.log('constructor called')
super(props);
this.state = {
count: 0
};
this.Add = this.Add.bind(this);
this.Remove = this.Remove.bind(this);
}
componentWillMount(){
console.log('componentWillMount called')
}
componentDidMount() {
console.log('componentDidMount called')
}
Add(){
this.setState({count: this.state.count + 1})
}
Remove(){
this.setState({count: this.state.count - 1})
}
componentWillReceiveProps(){
console.log('componentWillReceiveProps called')
}
shouldComponentUpdate(){
console.log('shouldComponentUpdate called');
return true
}
componentWillUpdate(){
console.log('componentWillUpdate called')
}
componentDidUpdate(){
console.log('componentDidUpdate called');
}
render() {
console.log('render called');
return (
<div>
<div>
<h1>{this.state.count}</h1>
</div>
<button onClick={this.Add}>
<span>+(Add)</span>
</button>
<button onClick={this.Remove}>
<span>-(Remove)</span>
</button>
</div>
);
}
}// Console Output:
constructor called
componentWillMount called
render called
componentDidMount called// console Output:
shouldComponentUpdate called
componentWillUpdate called
render called
componentDidUpdate called