Hook for logging prop diffs in a functional component

useLogPropDiffs.js

import { useEffect, useRef } from 'react';

const useLogPropDiffs = (props, label = '') => {
  const previousProps = useRef({});

  useEffect(() => {
    previousProps.current = props;
  });

  if (previousProps.current) {
    for (const [key, value] of Object.entries(props)) {
      if (value !== previousProps.current[key]) {
        console.log(`${label} prop differs ${key}: ${value?.toString()} ${previousProps.current[key]?.toString()}`);
      }
    }
  }
  previousProps.current = props;
}

export default useLogPropDiffs;