useDebouncedState
어떤 React state든 값이 바뀐 뒤 400ms 동안 멈추면 그때만 디바운스된 값이 따라옵니다. 검색어·슬라이더·셀렉트처럼 UI에 따라 state를 바꾸는 모든 경우에 동일하게 쓸 수 있습니다.
문자열 (SearchBar)
- 즉시 값
- —
- 디바운스 후 (API·useQuery 키)
- —
- 디바운스 기준 시뮬 요청 횟수
- 0
- 마지막 시뮬 요청 키워드
- —
- 마지막 Enter 검색 (즉시)
- —
숫자 (range 슬라이더)
슬라이더를 움직일 때마다 state는 바로 바뀌고, 멈춘 뒤에만 debouncedMaxPrice가 갱신됩니다.
- 즉시 값
- 500
- 디바운스 후 (예: 목록 필터 요청)
- 500
- 디바운스 기준 시뮬 요청 횟수
- 0
- 마지막 반영된 디바운스 값
- —
문자열 (select)
input이 아니어도 useState만 있으면 동일합니다.
- 즉시 값
- —
- 디바운스 후 (예: 목록 쿼리)
- —
- 디바운스 기준 시뮬 요청 횟수
- 0
- 마지막 반영된 디바운스 값
- —
코드 요약
const [query, setQuery] = useState("");
const debouncedQuery = useDebouncedState(query, 400);
const [maxPrice, setMaxPrice] = useState(500);
const debouncedMaxPrice = useDebouncedState(maxPrice, 400);
const [category, setCategory] = useState("");
const debouncedCategory = useDebouncedState(category, 400);
// useQuery({ queryKey: ["items", debouncedQuery, debouncedMaxPrice, debouncedCategory], ... })
