React logger

reactLogger.jsx

// component
shouldComponentUpdate(nextProps, nextState) {
    console.group('react-logger');
    console.log('[prevProps]', this.props);
    console.log('[nextProps]', nextProps);
    console.log('[prevState]', this.state);
    console.log('[nextState]', nextState);
    console.log('[propsChange]', difference(this.props, nextProps));
    console.log('[stateChange]', difference(this.state, nextState));
    console.groupEnd('react-logger');
    return true;
}

// difference.js
import _ from 'lodash';

/**
 * Deep diff between two object, using lodash
 * @param  {Object} object Object compared
 * @param  {Object} base   Object to compare with
 * @return {Object}        Return a new object who represent the diff
 */
function difference(object, base) {
    function changes(object, base) {
        return _.transform(object, function(result, value, key) {
            if (!_.isEqual(value, base[key])) {
                result[key] = _.isObject(value) && _.isObject(base[key]) ? changes(value, base[key]) : value;
            }
        });
    }
    return changes(object, base);
}

export default difference;