index.js

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

export function logComponentUpdate(WrappedComponent) {
  return class Wrapped extends WrappedComponent {
    static displayName = `logComponentUpdate(${getDisplayName(WrappedComponent)})`;
    static WrappedComponent = WrappedComponent;

    shouldComponentUpdate(nextProps, nextState) {
      const changes = [];

      let update = false;

      for (const k in nextProps) {
        if (this.props[k] !== nextProps[k]) {
          if (typeof this.props[k] === 'function' && typeof nextProps[k] === 'function') {
            changes.push(`props.${k}; avoidable?`);
          } else {
            changes.push(`props.${k}`);
            update = true;
          }
        }
      }

      if (typeof nextState === 'object') {
        for (const k in nextState) {
          if (this.state[k] !== nextState[k]) {
            changes.push(`state.${k}`);
            update = true;
          }
        }
      }

      if (changes.length > 0) {
        console.group(getDisplayName(WrappedComponent));
        changes.forEach((l) => console.log(l));
        console.groupEnd();
      }

      if (WrappedComponent.prototype.shouldComponentUpdate) {
        return WrappedComponent.prototype.shouldComponentUpdate.call(this, nextProps, nextState);
      }

      return update;
    }
  };
}