use-deep-compare-effect

1import { dequal } from 'dequal'
2import { useRef } from 'react'
3import { useIsomorphicLayoutEffect } from '@/registry/hooks/use-isomorphic-layout-effect'
4import type { DependencyList, EffectCallback } from 'react'
5 
6export function useDeepCompareEffect(
7  effect: EffectCallback,
8  deps: DependencyList,
9) {
10  const ref = useRef<DependencyList>(deps)
11 
12  if (!ref.current || !dequal(ref.current, deps)) {
13    ref.current = deps
14  }
15 
16  useIsomorphicLayoutEffect(effect, ref.current)
17}