How can we do deep comparison of "this.props" and "nextProps" in "shouldComponentUpdate"?

Question

So far, what I'm aware is, if the props (current and next) and stringified and then compared, it might provide some result. But, I'm not sure if that works correctly for props which are holding functions. If there is any other possible way to do so, please explain.

JSON.stringify(this.props) === JSON.stringify(nextProps)

Answer 1

JSON.stringify may not work because object keys order is based on when they are defined ( relevant stackoverflow rabbit hole ). So you may not always be able to guarantee they will be in the same order.

For reasons that I can't remember (possibly boredom) I made an object diff function a few months ago:

function diff (a, b) {
  let obj = {};
  
  for (let key in a) {
    if (a[key] === b[key]) continue;
    
    obj[key] = b[key];
  }
  
  for (let key in b) {
    if (key in obj) continue;
    
    if (a[key] === b[key]) continue;
    
    obj[key] = b[key];
  }
  
  return obj;
}

Though this will only work for primitive values (eg string, number, etc...).

If this is a personal project, why not try and extend this for objects and arrays?

If not, I'd suggest using a library like deep-object-diff