useDebounce

A hook that delays updating a value until a specified time has passed since the last change. Useful for reducing the number of API calls or expensive calculations while a user is typing or interacting.

• Improves performance by reducing the frequency of expensive operations
• Perfect for search inputs, form validation, and API requests
• Configurable delay time to suit different use cases

---

Installation

The useDebounce hook is part of our UI library. You can import it directly from the hooks directory.

---

Usage

Here is how to use the useDebounce hook in your project:

React TSX
1import { useDebounce } from "@/hooks/use-debounce"

React TSX
1function SearchInput() {
2  const [inputValue, setInputValue] = useState("")
3  // Value only updates 500ms after the user stops typing
4  const debouncedValue = useDebounce(inputValue, 500)
5  
6  // Effect only runs when debouncedValue changes
7  useEffect(() => {
8    // Perform search or API call with debouncedValue
9    searchApi(debouncedValue)
10  }, [debouncedValue])
11  
12  return (
13    <div>
14      <input
15        type="text"
16        value={inputValue}
17        onChange={(e) => setInputValue(e.target.value)}
18        placeholder="Type to search..."
19      />
20      <p>Current search term: {debouncedValue}</p>
21    </div>
22  )
23}

---

API Reference

React TSX
1function useDebounce<T>(
2  value: T,
3  delay: number
4): T

Inputs

• value: The value to be debounced
• delay: The delay in milliseconds

Output

• debouncedValue: The debounced value that updates after the specified delay

Behavior

• Hook tracks the provided value but only updates the returned value after the delay
• Each change to the input value resets the delay timer
• The debounced value remains stable during rapid changes to the input value
• Cleans up any pending updates on component unmount