HoC for debug component update

debugUpdate.js

/* eslint no-console: 0 */

import _ from 'lodash';
import { diff } from 'deep-object-diff';
import { shouldUpdate } from 'recompose';

export default function debugUpdate(groupLabel, collapsed = true) {
  if (typeof groupLabel === 'undefined') {
    throw new Error('Should provide `groupLabel`.');
  }

  return shouldUpdate((props, nextProps) => {
    if (process.env.NODE_ENV !== 'production') {
      let count = 0;
      _.each(props, (v, k) => {
        if (v !== nextProps[k]) {
          if (count === 0) {
            const mainLabel =
              typeof groupLabel === 'function' ? groupLabel(props) : groupLabel;
            console[collapsed ? 'groupCollapsed' : 'group'](
              `[debugUpdate] ${mainLabel}`
            );
          }
          console.groupCollapsed(`"${k}"`);
          console.log('%c current ', 'background: #B8E5EC', v);
          console.log('%c next ', 'background: #FCD4B3', nextProps[k]);
          console.log(
            '%c diff ',
            'color: white; background: #EE4F33',
            diff(v, nextProps[k])
          );
          console.groupEnd();
          count++;
        }
      });
      if (count > 0) {
        console.groupEnd();
      }
    }
    return true;
  });
}