use-debounce

PreviousNext

A hook to debounce a value

Docs
hookshook

Preview

Loading preview…
registry/hooks/use-debounce.ts
import { useEffect, useState } from 'react'
import { useDebounceFn } from '@/registry/hooks/use-debounce-fn'
import type { DebounceOptions } from '@/registry/hooks/use-debounce-fn'

export function useDebounce<T>(
  value: T,
  debounceMs?: number,
  options?: DebounceOptions,
) {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  const { run } = useDebounceFn(
    () => {
      setDebouncedValue(value)
    },
    debounceMs,
    options,
  )

  useEffect(() => {
    return run()
  }, [value, run])

  return debouncedValue
}

Installation

npx shadcn@latest add @hooks/use-debounce

Usage

import { UseDebounce } from "@/hooks/use-debounce"
const value = UseDebounce()