useTrace.js

// @flow

import * as React from 'react';

// inside functional components, you can drop this hook
// and be notified when the modified component re-renders.
// this component will also tell you _why_ it was re-rendered
export default function useTraceUpdate(props: any) {
  const prev = React.useRef(props);
  React.useEffect(() => {
    if (process.env.NODE_ENV !== 'production') {
      const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
        if (prev.current[k] !== v) {
          ps[k] = [prev.current[k], v];
        }
        return ps;
      }, {});
      if (Object.keys(changedProps).length > 0) {
        // eslint-disable-next-line
        console.log('‼️ Changed props:', changedProps);
      }
      prev.current = props;
    }
  });
}