The props comparison with single key or small data is easy and it works great. But when we need to compare large data like an arrays of objects, the deep comparison will become very costly.

For the usecase:

                        const largeData =[
                        {
                        id: ...,
                        title: ...',
                        unit:...,
                        value: ...,
                        timestamp: ...,
                        active: true,
                        permissions:[]
                         },
                         ...
                        ]
                      

Let's observe the above codes, in which I have an array ob objects stored in redux. And whenever the active state of any objects get changed I need to dispatch an action to update redux state to be same for all connected components with that reducer.

Best way to do comparison:

                            
                             class SomeComponent extends Component {
                                    state = {
                                      stateData:[],
                                    };
                                  
                                componentDidUpdate(prevProps) {
                                const { largeData } = this.props;
                    
                                const { largeData: prevLargeData } = prevProps;
                    
                               if (largeData !== prevLargeData) {
                                   //dispatch something
                               }
                             }
                    
                             render() {
                                ...
                               }
                    
                            }
                    
                             const mapStateToProps = state => ({
                                largeData: state.stateData
                              });
                              
                              
                              export default connect( mapStateToProps)(SomeComponent));
                          

or

                            componentDidUpdate = (prevProps) => {
                                const {   language,  privileges } = this.props;
                    
                                const { 
                                    language: prevLanguage,  privileges: prevPrivileges
                                } = prevProps
                            
                                if (language !== prevLanguage && privileges !== prevPrivileges) {
                                  this.setState({ isLoading: false });
                                }
                              }