react-whyRerender.js

/**
 * How to use:
 * In the render function, include
 * 
 *     window.whyRerender && window.whyRerender(this.props, this.state);
 */

window.whyRerender = (props, state) => {
	if (window.whyRerender.prevProps) {
		const propsDiff = Object.keys(props).map((propName) => {
			if (props[propName] !== window.whyRerender.prevProps[propName]) {
				return propName;
			}
		}).filter(Boolean);

		const stateDiff = Object.keys(state).map((stateName) => {
			if (state[stateName] !== window.whyRerender.prevState[stateName]) {
				return stateName;
			}
		}).filter(Boolean);

		console.log('[whyRerender]', propsDiff, stateDiff)
	}



	window.whyRerender.prevProps = { ...props };
	window.whyRerender.prevState = { ...state };
}

    const whyRerender = (_props, _state, name = '[whyRerender]') => {
      if (whyRerender.prevProps) {
        const propsDiff = Object.keys(_props).map((propName) => {
          if (_props[propName] !== whyRerender.prevProps[propName]) {
            return propName;
          }
        }).filter(Boolean);

        const stateDiff = Object.keys(_state).map((stateName) => {
          if (_state[stateName] !== whyRerender.prevState[stateName]) {
            return stateName;
          }
        }).filter(Boolean);

        console.log(name, propsDiff, stateDiff)
      }

      whyRerender.prevProps = { ..._props };
      whyRerender.prevState = { ..._state };
    };

...
whyRerender(this.props, this.state, this.className);