Docs
useThrottle

Throttle computationally expensive operations with useThrottle.

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-throttle

Usage

"use client"
 
import * as React from "react"
 
import { useThrottle } from "@/hooks/use-throttle"
 
export function Component() {
  const [val, setVal] = React.useState("")
  const throttledValue = useThrottle(val, 300)
 
  return (
    <section>
      <h1>useThrottle</h1>
      <input
        placeholder="Type some text"
        style={{ background: "var(--charcoal)" }}
        type="text"
        value={val}
        onChange={(e) => {
          setVal(e.target.value)
        }}
      />
      <p>Val: {val}</p>
      <p>Throttled: {throttledValue}</p>
    </section>
  )
}

Example Usage

const throttledValue = useThrottle(inputValue, 300)
  • inputValue: The value to throttle (e.g., a search query or scroll position).
  • 300: The interval in milliseconds (e.g., update at most every 300ms).
  • throttledValue: The throttled value that updates at most once every 300ms.

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
valueTThe value to throttle. This can be of any type (string, number, object, etc.).-No
intervalnumberThe interval in milliseconds at which the throttled value is updated.500Yes

Return Values

NameTypeDescription
throttledValueTThe throttled value, updated at most once per specified interval.
useSwipeuseTimeAgo