Practical Applications: Search, Scroll, Resize

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.

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.

A parallax effect or read-progress bar updates based on scroll position. Throttle the scroll handler to a 60fps maximum using a 16ms delay: const throttledScrollY = useThrottle(scrollY, 16). The UI updates smoothly without the expense of recomputing position on every pixel of scroll.

Listening to window resize to recalculate layout is best debounced, not throttled. The layout calculation only needs to run once after the user finishes resizing. Use a 200ms debounce on the window dimensions. During the resize drag, the UI can show a simplified state; the recalculated layout appears when resizing stops.

When debouncedQuery changes, create a new AbortController and pass its signal to fetch(url, { signal }). Return a cleanup function that calls controller.abort(). This cancels any in-flight request from a previous query when a new debounced query arrives, preventing race conditions where a slow earlier response overwrites a faster later one.

Without AbortController, if the user types "re", waits, types "react", the second query may return before the first (due to caching). The search results would briefly show React results, then be overwritten with the stale "re" results. AbortController prevents this by cancelling the earlier request entirely.

The dropdown combines debounce for API calls and immediate state for input display. inputValue controls what appears in the text field. useDebounce(inputValue, 250) controls when the suggestions fetch fires. The suggestion list renders from the fetched results state, which is separate from both input states.

Async form validation, such as checking if an email already exists, should be debounced to avoid hammering the server on each keystroke. Use a 400ms debounce on the field value and fire the validation request in a useEffect that depends on the debounced value. Show a spinner in the field while validation is pending.

Debounce is perfect for auto-saving form content as the user types. Set a 1000ms debounce on the form values object. When the debounced value changes, trigger a save to localStorage or an API endpoint. The user sees a "Saving..." indicator while the debounce is pending and "Saved" once the request completes.

Delay values are user-experience decisions. For search: 200-300ms balances responsiveness with reduced requests. For resize: 150-200ms is acceptable because users expect layout to settle after resizing. For auto-save: 1000ms gives users time to type a sentence before saving. Adjust based on the expected interaction speed.

Real applications often need multiple optimizations simultaneously. A document editor might debounce auto-save (1s), throttle the word-count calculation (500ms), and use IntersectionObserver for analytics. These techniques compose well because each operates independently on its own timer and scope.

Why should you use AbortController together with a debounced search query?

Use useDebounce for search inputs, resize handlers, and form auto-save. Use useThrottle for scroll and mouse move. Always combine debounced API calls with AbortController to prevent race conditions. Show loading state whenever inputValue !== debouncedQuery to keep the UI responsive and informative.