Track changed hook dependencies in React

useTraceChangedHookDependencies.ts

import { DependencyList, useRef } from 'react';

export function useTrackChangedDependencies(
    dependencies: Record<string, any>,
    location = 'unknown location'
): DependencyList {
    const prevDependencies = useRef<Record<string, any> | undefined>();
    if (prevDependencies.current !== undefined) {
        const changedDependencies = Array.from(Object.entries(dependencies))
            .map<[string, any, any] | undefined>(([key, dependency]) =>
                prevDependencies!.current[key] !== dependency
                    ? [key, prevDependencies!.current[key], dependency]
                    : undefined
            )
            .filter(Boolean);

        if (changedDependencies.length > 0) {
            console.log(`Changed dependencies in ${location}`);
            console.table(changedDependencies);
        }
    }

    prevDependencies.current = dependencies;

    return Object.entries(dependencies).reduce<any[]>((list, entry) => {
        list.push(entry[1]);
        return list;
    }, []);
}