useDebounce

NewSSR SAFE

Debounces a value or function for better performance.

$ pnpm dlx shadcn@latest add @byphongphan/use-debounce

Requires @byphongphan in components.json

utilities

use-debounce.tsx

Debounce · 500msUp to date

Immediate

—

Debounced

—

The debounced value updates 500ms after you stop typing.

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-debounce

Requires @byphongphan in components.json

Usage

import { useState } from "react"import { useDebounce } from "@/shared/hooks"
export function SearchComponent() {  const [searchTerm, setSearchTerm] = useState("")  const debouncedSearch = useDebounce(searchTerm, 500)
  // Trigger network search query only when debouncedSearch settles  return (    <input      value={searchTerm}      onChange={(e) => setSearchTerm(e.target.value)}      placeholder="Search docs..."    />  )}

Props & Parameters

Param	Type	Default	Description
`value`	`T`	—	The rapidly changing input value to debounce.
`delay`	`number`	`500`	Delay in milliseconds before updating debounced value.

Returns

Return	Type	Description
`debouncedValue`	`T`	The debounced value updated only after the delay timer expires without changes.

useDebounce

Installation

Usage

Props & Parameters

Returns

Command Palette