'How to use shouldComponentUpdate() and componentWIllUpdate() method correctly in ReactJs?

Before i was using componentWillReceiveProps to update my component local object after getting data from redux.

componentWillReceiveProps(nextProps) {
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
        this.setState({user:{
          name:nextProps.editUser.name,
          email:nextProps.editUser.email,
        }}, function(){
          this.setState({addModalUserEdit:true});
        });
    }
}

But now i want to use shouldComponentUpdate and componentWillUpdate as in react documentation as per react life cycle.

shouldComponentUpdate(nextProps, nextState){
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
      return true;
    }
    return false;
}

componentWillUpdate(nextProps, nextState) {
    if (nextProps.editUser && !nextProps.loading && !isEqual(this.state.user, nextProps.editUser)){
        this.setState({user:{
          name:nextProps.editUser.name,
          email:nextProps.editUser.email,
        }}, function(){
          this.setState({addModalUserEdit:true});
        });
    }
}

but i generate an error as

"Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

Please guide me what i am doing wrong in understanding react life cycle.

Thanks in advance.

reactjs react-redux

Solution 1:^[1]

shouldComponentUpdate() is invoked before rendering when new props or state are being received.

  shouldComponentUpdate (nextProps) {
     return nextProps !== this.props
  }

componentDidUpdate() is invoked immediately after update state.

Both method is not called for the initial render.

Solution 2:^[2]

shouldComponentUpdate is run before the update to the state (and that is why it gives you the nextState as a property) so when doing test against the state you need to use the nextState.

shouldComponentUpdate(nextProps, nextState){
    if (nextProps.editUser && !nextProps.loading && !isEqual(nextState.user, nextProps.editUser)){
      return true;
    }
    return false;
}

Keep in mind though, that it is advised not to do deep equality checks in shouldComponentUpdate because it will hurt performance.

Additionally the componentWillUpdate is (in recent versions) being called UNSAFE_componentWillUpdate and it states

Note that you cannot call this.setState() here; nor should you do anything else (e.g. dispatch a Redux action) that would trigger an update to a React component before UNSAFE_componentWillUpdate() returns.

The suggested method is to use the componentDidUpdate.

Solution 3:^[3]

shouldComponentUpdate use to decide that changes in props or the state have affected to component output or not.

componentDidUpdate will be triggered when there is an update on component output.

shoudComponentUpdate take 2 arguments, nextProps and nextState. that contains a new update of props and state. and returning a boolean.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Vikram Mevasiya
Solution 2
Solution 3	user3767527

'How to use shouldComponentUpdate() and componentWIllUpdate() method correctly in ReactJs?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]