useDebugWhichKeysChanged.tsx

import { useRef } from "react";

/**
 * Use this hook to quickly answer the question: Why did my useEffect or useMemo
 * callback run again?
 *
 * Usage:
 *
 *     // If you have this code...
 *     useEffect(() => {
 *       ...
 *     }, [a, b, c])
 *
 *     // ... then add this code right above or below it:
 *     const keysChanged = useDebugWhichKeysChanged({ a, b, c })
 *     if (keysChanged.length > 0) {
 *       console.log('These keys changed:', keysChanged)
 *     }
 *
 */
export function useDebugWhichKeysChanged(items: Record<string, any>) {
  const prevItemsRef = useRef<Record<string, any>>({});

  const keys = Object.keys(items);
  const changed = keys.filter(
    (key) => items[key] !== prevItemsRef.current[key]
  );

  prevItemsRef.current = items;

  return changed;
}