ComponentDidUpdate and prevState

Question

Here's the scenario. I have a parent component, with a child component. Parent component does the ajax calls and pushes data down to the child.

When child component receives new data, within componentDidUpdate (of the child) i will re-set its internal state.

componentDidUpdate(prevProps, prevState) { 

    if ( prevProps.myRow !== this.props.myRow ) { //check for when new data is passed into this component from its parent / container...
            this.setState({
                editableRowObj    : this.props.myRow    //... only then I should bother updating the state with the new data passed in.         
            })
    }
}

I cannot think of a scenario where inside componentDidUpdate (of the child) I will need to check

prevState !== this.state

This is because when I pass new data into the child component, this.state will be equal to prevState (which will be the old state, prior to receiving new data); i.e. until such time as I run the above setState, the prev and current states will remain the same.

Hence my question is, under what scenarios will I need to check prevState != this.state ?

Answer 1

The same scenario that applies to props, can apply to props. It might so happen that on change of state you need to trigger an API call to fetch the data. Now you might decide to call a function in the setState callback, but if the same state is being changed from multiple places then componentDidUpdate is a good place.

Answer 2

There's no meaning in comparing the states as is, as they will never be the same. What you're comparing this way is references to the state, and not the nested values. Also, you should be careful with this function, and using setState inside componentDidUpdate is considered an anti-pattern and is not advisable - there's even an ESlint rule that enforces not to do this.

One scenario for comparing states (or props) is in the function shouldComponentUpdate(nextProps, nextState) wherein you decide wether the component should update or not (returns boolean).