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]: any;
};

export function useDependencySpy(dependenciesObject: DependenciesObject) {
  const listOfRefs = Object.entries(dependenciesObject).map(([key, value]) => ({ key, originalObject: useRef(value) }));

  listOfRefs.forEach((ref) => {
    if (!Object.is(ref.originalObject.current, dependenciesObject[ref.key])) {
      console.info(`[${ref.key}] variable reference has changed!`);
      ref.originalObject.current = dependenciesObject[ref.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>;
}