React dependency spy

use-dependency-spy.ts

/**
* Ever wondered what triggered a rerendering in React?
* Who was the killer? Which dependency got updated?
* This is a very stupid little code that can help you debug the issue.
*/

import { useRef } from 'react';

type DependenciesObject = {
  [dependencyName: string]: unknown;
};

export function useDependencySpy(dependenciesObject: DependenciesObject) {
  const previousDependenciesRef = useRef<DependenciesObject>({});

  Object.keys(dependenciesObject).forEach(key => {
    if (!Object.is(previousDependenciesRef.current[key], dependenciesObject[key])) {
      console.info(`[${key}] variable reference has changed!`);
      previousDependenciesRef.current[key] = dependenciesObject[key];
    }
  });
}

// usage:
function MyComponent() {
  const memoedThingThatShouldNotChange = useMemo(() => computeSomething(a, b), [a, b]); 

  useDependencySpy({ a, b });
   
  // just a random UI
  return <div>JSON.stringify(memoedThingThatShouldNotChange)</div>;
}