use-throttle

PreviousNext

A hook to throttle a value

Docs
hookshook

Preview

Loading preview…
registry/hooks/use-throttle.ts
import { useEffect, useState } from 'react'
import { useThrottleFn } from '@/registry/hooks/use-throttle-fn'
import type { ThrottleOptions } from '@/registry/hooks/use-throttle-fn'

export function useThrottle<T>(
  value: T,
  throttleMs?: number,
  options?: ThrottleOptions,
) {
  const [throttledValue, setThrottledValue] = useState<T>(value)

  const { run } = useThrottleFn(
    () => {
      setThrottledValue(value)
    },
    throttleMs,
    options,
  )

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

  return throttledValue
}

Installation

npx shadcn@latest add @hooks/use-throttle

Usage

import { UseThrottle } from "@/hooks/use-throttle"
const value = UseThrottle()