useDebugPropChanges #react #hook

useDebubPropChanges.tsx

import { useRef } from "react";

/**
 * @description used for identify changes between re-renders
 * @example
 * const changedProps = useChanges(props)
 * @example
 * useChanges(props, changes => console.log(changes))
 */
export function useDebugPropsChanges<T extends Record<any, any>>(
  stuff: T,
  sideEffect?: (changes: (keyof T)[]) => void,
): (keyof T)[] {
  const ref = useRef(stuff);
  if (ref.current !== stuff) {
    const changes = [];
    for (const k in stuff) {
      if (!Object.is(stuff[k], ref.current[k])) {
        changes.push(k);
      }
    }
    ref.current = stuff;
    if (sideEffect) {
      sideEffect(changes);
    }
    return changes;
  } else {
    return [];
  }
}