useWhatChanged.js

import { useEffect, useRef } from 'react';

/**
 * A small utility hook to help figure out what is changing and causing
 * re-renders. Add it to the component you're investigating and pass in a object
 * of the values that you think might be changing.
 *
 * Ex: useWhatChanged({ someProp, someOtherProp });
 */
export function useWhatChanged(props) {
  const previousProps = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((result, [key, value]) => {
      const previousValue = previousProps.current[key];
      return previousValue !== value ?
      	{ ...result, [key]: [previousValue, value] } :
      	result;
    }, {});

    if (Object.keys(changedProps).length > 0) {
      console.info('The following props changed:', changedProps);
    } else {
      console.info('No props changed.');
    }

    previousProps.current = props;
  });
}