useDeepCompareLayoutEffect
A hook to use a deep compare layout effect
Installation
npx shadcn@latest add @hooks/use-deep-compare-layout-effectpnpm dlx shadcn@latest add @hooks/use-deep-compare-layout-effectyarn dlx shadcn@latest add @hooks/use-deep-compare-layout-effectbun x shadcn@latest add @hooks/use-deep-compare-layout-effectCopy and paste the following code into your project.
import { dequal } from 'dequal'
import { useLayoutEffect, useRef } from 'react'
import type { DependencyList, EffectCallback } from 'react'
export function useDeepCompareLayoutEffect(
effect: EffectCallback,
deps: DependencyList,
) {
const ref = useRef<DependencyList>(deps)
if (!ref.current || !dequal(ref.current, deps)) {
ref.current = deps
}
useLayoutEffect(effect, ref.current)
}API
/**
* A hook to use a deep compare layout effect
* @param effect - The effect to use
* @param deps - The dependencies to use
*/
export function useDeepCompareLayoutEffect(
effect: EffectCallback,
deps: DependencyList,
): voidCredits
Last updated on