use-deep-compare-effect.ts

/* eslint-disable react-compiler/react-compiler */
import {
  useEffect,
  useRef,
  type DependencyList,
  type EffectCallback,
} from 'react';
import { equal } from '@wry/equality';

/**
 * A custom hook that works like `useEffect` but uses deep comparison for
 * dependencies. This is useful when you want to ensure that the effect only
 * runs when the actual values of the dependencies change, not just their
 * references.
 *
 * @param effect The effect callback to run.
 * @param deps The dependencies array to compare deeply.
 *
 * Altered from: https://github.com/sandiiarov/use-deep-compare/blob/master/src/useDeepCompareMemoize.ts
 */
export function useDeepCompareEffect(
  effect: EffectCallback,
  deps: DependencyList
): void {
  const depsRef = useRef<DependencyList>(undefined);
  const signalRef = useRef<number>(0);

  if (deps === undefined || !equal(deps, depsRef.current)) {
    signalRef.current += 1;
  }

  depsRef.current = deps;

  useEffect(effect, [signalRef.current]);
}