logComponentsUpdates.react.js

import Component from 'react-pure-render/component';
import React from 'react';
import each from 'lodash/each';
import shouldPureComponentUpdate from 'react-pure-render/function';

export default function logComponentUpdates(Wrapped) {
  return class Wrapper extends Component {
    shouldComponentUpdate(nextProps, nextState) {
      const should = shouldPureComponentUpdate.call(this, nextProps, nextState);
      if (should) {
        each(nextProps, (value, key) => {
          if (value !== this.props[key]) {
            console.log(`[logComponentUpdates] !! ${key} has changed?`, value, this.props[key]); // eslint-disable-line no-console, max-len
          }
        });
      }
      return should;
    }

    render() {
      return (
        <Wrapped {...this.props} />
      );
    }
  };
}