Drop-in replacement for `useEffect` that helps debug unstable dependencies

useEffectWithChangeLogger.ts

const useEffectWithChangeLogger = (
  effect: () => void,
  deps: any[],
  name = 'Component',
) => {
  const previousDepsRef = useRef<any[] | null>(null);

  useEffect(() => {
    if (previousDepsRef.current) {
      const changedDeps = deps
        .map((dep, index) => ({
          index,
          prev: previousDepsRef.current?.[index],
          next: dep,
        }))
        .filter(({prev, next}) => prev !== next);

      if (changedDeps.length > 0) {
        console.log(`[${name}] Dependencies changed:`, changedDeps);
      }
    }

    previousDepsRef.current = deps;
    return effect();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
};