useDeepCompareEffect
A hook to use a deep compare effect
useDeepCompareEffect
npx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-effect.json"pnpm dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-effect.json"yarn dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-effect.json"bun x shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-effect.json"Copy and paste the following code into your project.
import { dequal } from 'dequal'
import { useRef } from 'react'
import { useIsomorphicLayoutEffect } from '@/registry/hooks/use-isomorphic-layout-effect'
import type { DependencyList, EffectCallback } from 'react'
export function useDeepCompareEffect(
effect: EffectCallback,
deps: DependencyList,
) {
const ref = useRef<DependencyList>(deps)
if (!ref.current || !dequal(ref.current, deps)) {
ref.current = deps
}
useIsomorphicLayoutEffect(effect, ref.current)
}credits
Last updated on