Debouncing & Throttling

The problem I keep seeing

Search boxes that hit the API on every keystroke, scroll handlers that run 60 times per second, resize handlers that recompute layout on every pixel—all of that wastes requests, clogs the main thread, and can leave the UI showing stale or out-of-order results. You need to slow down the reaction to high-frequency events without making the UI feel unresponsive.

Debounce: run after the user (or event source) has been quiet for a period (e.g. 300ms after last keystroke). Throttle: run at most once per period (e.g. scroll handler runs at most every 100ms). Same idea—reduce frequency—different timing model.

Naive approach

Run the effect (or handler) on every change. For search, that’s one request per character; for scroll, dozens per second.

First improvement

Debounce the value: derive a “stable” value that only updates after the user has stopped typing for delay ms. Use that for the API call. Same pattern works for any high-frequency input (e.g. filter inputs).

Why this helps: One request per “burst” of typing. Fewer network calls, and you avoid the race where an older response overwrites a newer one if you don’t cancel in-flight requests (React Query does that when queryKey changes).

Remaining issues

• Scroll/resize: For scroll or resize, debounce can feel laggy (nothing happens until you stop). Throttle is better: run at most every N ms so the UI updates periodically while the user scrolls.
• Leading vs trailing: Debounce is usually “trailing” (after pause). You can also do “leading” (run immediately, then ignore for delay). Throttle often uses “leading” so the first event runs right away.
• Abort in-flight requests: When the debounced value changes, cancel any previous fetch so an old response doesn’t overwrite newer results. React Query’s queryKey change does this; with raw fetch use AbortController.

Production pattern

Keep useDebounce for the input value; feed the debounced value into useQuery as queryKey. Use enabled to avoid requesting when the query is too short. For scroll/resize, use a throttle (or a library like lodash.throttle / use-debounce) so you don’t run on every frame.

When I use this

• Debounce: Search, filter inputs, any text that drives an API call or heavy computation. “Wait until the user pauses.”
• Throttle: Scroll position, window resize, mousemove, progress updates. “Run at most every N ms.”
• Skip: When the operation is cheap and you need every value (e.g. local state for controlled input). Don’t debounce the input value itself—only the side effect.

Gotchas

• Stale closure in throttle: If you throttle a callback that reads state, the callback may see an old state. Use a ref for the latest value, or ensure the throttled function is recreated when deps change.
• Leading edge: For “submit on first keystroke after idle” (e.g. run search as soon as user types, then debounce), use a debounce with leading: true or a custom implementation.
• React 18 Strict Mode: Effects run twice in dev. Your debounce/throttle should still behave correctly—cleanup clears the timer. If you store “last run” in a ref, double-mount doesn’t break it.