Practical Applications: Search, Scroll, Resize
Apply debounce to search inputs and throttle to scroll/resize listeners in real component examples.
Live Search with useDebounce
In a live search component, maintain two separate state variables: inputValue for the raw input (updates on every keystroke, keeps the input field responsive) and debouncedQuery from useDebounce(inputValue, 300) (updates 300ms after typing stops, triggers the API call). This separation provides instant visual feedback without excessive requests.
Loading State During Search
Show a loading spinner as soon as the user starts typing, not just when the API call begins. Set isLoading: true whenever inputValue !== debouncedQuery — these are out of sync while the debounce is pending. Once the query stabilizes and the fetch completes, set it back to false. Users see a responsive loading indicator throughout.
All lessons in this course
- Why Debounce and Throttle Matter in UIs
- Implementing useDebounce Custom Hook
- Implementing useThrottle Custom Hook
- Practical Applications: Search, Scroll, Resize