签名
useDebounceValue(value, delay) 在 delay 毫秒稳定后返回防抖后的值。
- value — 实时输入
- delay — 毫秒（搜索常用 300–500）
TSsignature
function useDebounceValue<T>(value: T, delay: number): T;用法
输入用本地 state；把防抖后的值传给 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}注意
- 不要用未防抖的按键值做 query key
- 优先用此 hook，不要在组件里手写 setTimeout