Signature
useDebounceValue(value, delay) returns the debounced value after delay milliseconds of stability.
- value — the live input (string, number, object, …)
- delay — wait time in ms (common: 300–500 for search)
TSsignature
function useDebounceValue<T>(value: T, delay: number): T;Usage
Keep the raw value in local state for the input; pass the debounced value into React Query (or similar).
TSXsearch
1import { Input, useDebounceValue } from "@quan-erp/shared-ui";
2import { useState } from "react";
3
4export function BranchSearch() {
5 const [search, setSearch] = useState("");
6 const debouncedSearch = useDebounceValue(search, 500);
7 const { data = [] } = useBranchQuery({
8 currentPage: 1,
9 pageSize: 20,
10 query: debouncedSearch,
11 });
12
13 return (
14 <Input
15 value={search}
16 onChange={(e) => setSearch(e.target.value)}
17 placeholder="Search branches"
18 />
19 );
20}Notes
- Do not debounce inside the query key with the raw keystroke value
- Prefer this hook over hand-rolled setTimeout in components
- Pair with list hooks that accept RequestIndexPaginationDto.query