debug-too-frequent-react-renders.js

/**
 * Add these to a class you want to debug 
 * 
 * It should show you when and why a render() is called for
 * Use that for a custom shouldComponentUpdate() implementation
 * 
 * Of course don't use this implementation, as deep compares are
 * expensive, compared to the often cheap renders.
*/

compare(nextProps){
  console.warn('doing compare!')
  Object.keys(nextProps).forEach(prop => {
    if(nextProps[prop] !== this.props[prop]) console.log('new prop: ', prop);
  });
}


shouldComponentUpdate(nextProps, nextState){
  this.compare(nextProps)
  const propDiff = diff(this.props, nextProps)
  const stateDiff = diff(this.state, nextState)
  const propLen = Object.keys(propDiff).length;
  const stateLen = Object.keys(stateDiff).length;

  return !!(propLen || stateLen);
}