React hook to track changes across render cycles. One of the most useful utilities for debugging perf or rendering weirdness.

useWhyDidComponentUpdate.ts

import { useEffect, useRef } from 'react';

export type Props = Record<string, any>;

export default function useWhyDidComponentUpdate(componentName: string, props: Props) {
  const prevProps = useRef<Props>({});

  useEffect(() => {
    if (prevProps.current) {
      const allKeys = Object.keys({ ...prevProps.current, ...props });
      const changedProps: Props = {};

      allKeys.forEach((key) => {
        if (!Object.is(prevProps.current[key], props[key])) {
          changedProps[key] = {
            from: prevProps.current[key],
            to: props[key],
          };
        }
      });

      if (Object.keys(changedProps).length) {
        console.log('[whyDidComponentUpdate]', componentName, changedProps);
      }
    }

    prevProps.current = props;
  });
}