useDebouncedValue

Returns a value that only updates after it stops changing for a delay.

Useful for search inputs and other fast-changing values that drive expensive work.

Install

npx shadcn@latest add @vibra/use-debounced-value

Needs the @vibra registry in your components.json — set it up once.

Examples

Settles 500ms after you stop typing.

Raw—

Debounced—

"use client"

import * as React from "react"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useDebouncedValue } from "@/hooks/use-debounced-value"

export default function UseDebouncedValueDemo() {
  const [value, setValue] = React.useState("")
  const debounced = useDebouncedValue(value, 500)

  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Search</CardTitle>
        <CardDescription>Settles 500ms after you stop typing.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <Input
          value={value}
          onChange={(event) => setValue(event.target.value)}
          placeholder="Type something…"
          aria-label="Search"
        />
        <div className="flex items-center justify-between text-xs">
          <span className="text-muted-foreground">Raw</span>
          <Badge variant="outline" className="font-mono">
            {value || "—"}
          </Badge>
        </div>
        <div className="flex items-center justify-between text-xs">
          <span className="text-muted-foreground">Debounced</span>
          <Badge className="font-mono">{debounced || "—"}</Badge>
        </div>
      </CardContent>
    </Card>
  )
}

Props

Prop	Type	Default	Description
value	T	—	The value to debounce.
delay	number	300	Milliseconds to wait after the last change before updating.
returns	T	—	`value`, delayed until it stops changing for `delay` ms.

Dependencies

Registry

theme-vibra

Source

hooks/use-debounced-value.ts

import * as React from "react"

/** Returns `value`, delayed until it stops changing for `delay` ms (default 300). */
export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = React.useState(value)

  React.useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(timer)
  }, [value, delay])

  return debounced
}