Shadcn Hooks

useDeepCompareLayoutEffect

A hook to use a deep compare layout effect

GitHubView on GitHub

Installation

npx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-layout-effect.json"
pnpm dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-layout-effect.json"
yarn dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-layout-effect.json"
bun x shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-deep-compare-layout-effect.json"

Copy and paste the following code into your project.

use-deep-compare-layout-effect.ts
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,
): void

Credits

Last updated on

useDeepCompareEffect

A hook to use a deep compare effect

useHash

A hook to get current hash

On this page

InstallationAPICredits