[useLogKeyDifferences] #react #debugging

useLogKeyDifferences.ts

import { useRef } from 'react';

export default function useLogKeyDifferences<Type>(object: Type) {
  const objectRef = useRef<undefined | Type>(undefined);
  const previousObject = objectRef.current;
  objectRef.current = object;
  const differentKeys = new Set<keyof Type>();
  (Object.keys(object) as (keyof Type)[]).forEach((key) => {
    const prev = previousObject?.[key];
    const current = object[key];
    if (prev !== current) {
      differentKeys.add(key);
    }
  });
  (Object.keys(previousObject ?? {}) as (keyof Type)[]).forEach((key) => {
    const prev = previousObject?.[key];
    const current = object[key];
    if (prev !== current) {
      differentKeys.add(key);
    }
  });
  differentKeys.forEach((key) => {
    console.log('KeyDifference::', key, ({
      previous: previousObject?.[key],
      current: object[key],
    }));
  });
}