Signature
useDebounceValue(value, delay) သည် delay ms တည်ငြိမ်ပြီးနောက် debounced value ကို ပြန်ပေးပါသည်။
- value — live input
- delay — ms (search အတွက် 300–500 အသုံးများပါသည်)
TSsignature
function useDebounceValue<T>(value: T, delay: number): T;အသုံးပြုပုံ
Input အတွက် raw state ထားရှိပြီး debounced value ကို React Query သို့ ပေးပါ။
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}မှတ်ချက်များ
- Raw keystroke ကို query key ထဲ မထည့်ရပါ
- Component ထဲ setTimeout ကိုယ်တိုင် မရေးဘဲ ဤ hook ကို သုံးပါ