If I find that my componentDidUpdate(prevProps, prevState) is being run lots of times with same props and state values but different references, is this a sign of bad design?
componentDidUpdate(prevProps, prevState) {
console.log('isPropsReferenceEqual: ', prevProps === this.props); // false
console.log('isStateReferenceEqual: ', prevState === this.state); // false
console.log('isPropsValueEqual: ', JSON.stringify(prevProps) === JSON.stringify(this.props)); // true
console.log('isStateValueEqual: ', JSON.stringify(prevState) === JSON.stringify(this.state)); // true
}
It could be prevented adding the value equality check in shouldComponentUpdate(nextProps) but that is not the question. The question is that considered componentDidUpdate() triggers for either prop or state change, if this state or prop change is a ref change with same values is due to bad design and programmers fault and should have been prevented before in the state management e.g before dispatching the action or checking in the reducer that will update the state cheking value equality.