The constructor is the first lifecycle method to be called when the component is loaded. This is where we set the initial props and state of the component. So it makes sense that this is the right place to initialize the state of the component.
componentWillMount()
Safe to use setState? Yes!
In componentWillMount we can access the initial props and state that is defined in the constructor here. We get the chance to modify the state here before we render the UI for the first time.
render()
Safe to use setState? No!
In render, we can access the props and state here but we can’t set the state here. We can actually modify the data by assigning the data from props and state to a different variable. In this way, We have a chance of displaying data in the DOM as needed. Since it is assigned to a different variable, whatever changes done to this variable doesn’t affect the state or props.
componentDidMount()
Safe to use setState? Yes!
We can access props and state that is defined in the constructor and modified in preceding methods here. We can modify the state here to render the UI final time before ending the initial rendering phase. Since componentDidMount() only occurs one time, it is safe to set the state here.
componentWillReceiveProps()
Safe to use setState? Yes!
This method is called whenever there is a change in the props. this method has an argument called nextProps can be compared with current props. This method only occurs once so, it is safe to call this.setState() in this method.
shouldComponentUpdate()
Safe to use setState? Yes!
This method is called whenever there is an update in the props or state. This method has arguments called nextProps and nextState can be compared with current props and currentState. we can take a decision whether we can do re-rendering or not by returning a boolean value from this method. This method only occurs once so, it is safe to call this.setState() in this method.
componentWillUpdate()
Safe to use setState? No!
This method is called whenever there is a re-render. So, if we use setState() here that triggers re-render again which leads to an infinite loop. never use setState() here.
render()
Safe to use setState? No!
We can access the props and state here but we can’t modify it here. if we want to modify anything before displaying it on the DOM, we need to assign that to a variable and do that. We can’t set the state here.
componentDidUpdate()
Safe to use setState? Yes with the condition!
This method is called whenever there is a re-render. So, if we use setState() here that triggers re-render again which leads to an infinite loop.
we can avoid an infinite loop.
componentDidUpdate(prevProps, prevState) {
if(prevProps.userStatus !== this.props.userStatus) {
this.setState({userStatus: this.props.userStatus})
}
}
Constructor
Safe to use setState? No!
The constructor is the first lifecycle method to be called when the component is loaded. This is where we set the initial props and state of the component. So it makes sense that this is the right place to initialize the state of the component.
componentWillMount()
Safe to use setState? Yes!
In componentWillMount we can access the initial props and state that is defined in the constructor here. We get the chance to modify the state here before we render the UI for the first time.
render()
Safe to use setState? No!
In render, we can access the props and state here but we can’t set the state here. We can actually modify the data by assigning the data from props and state to a different variable. In this way, We have a chance of displaying data in the DOM as needed. Since it is assigned to a different variable, whatever changes done to this variable doesn’t affect the state or props.
componentDidMount()
Safe to use setState? Yes!
We can access props and state that is defined in the constructor and modified in preceding methods here. We can modify the state here to render the UI final time before ending the initial rendering phase. Since componentDidMount() only occurs one time, it is safe to set the state here.
componentWillReceiveProps()
Safe to use setState? Yes!
This method is called whenever there is a change in the props. this method has an argument called nextProps can be compared with current props. This method only occurs once so, it is safe to call this.setState() in this method.
shouldComponentUpdate()
Safe to use setState? Yes!
This method is called whenever there is an update in the props or state. This method has arguments called nextProps and nextState can be compared with current props and currentState. we can take a decision whether we can do re-rendering or not by returning a boolean value from this method. This method only occurs once so, it is safe to call this.setState() in this method.
componentWillUpdate()
Safe to use setState? No!
This method is called whenever there is a re-render. So, if we use setState() here that triggers re-render again which leads to an infinite loop. never use setState() here.
render()
Safe to use setState? No!
We can access the props and state here but we can’t modify it here. if we want to modify anything before displaying it on the DOM, we need to assign that to a variable and do that. We can’t set the state here.
componentDidUpdate()
Safe to use setState? Yes with the condition!
This method is called whenever there is a re-render. So, if we use setState() here that triggers re-render again which leads to an infinite loop. we can avoid an infinite loop. componentDidUpdate(prevProps, prevState) { if(prevProps.userStatus !== this.props.userStatus) { this.setState({userStatus: this.props.userStatus}) } }