CodeParkFor filtering on the client, useDeferredValue keeps typing smooth. Debouncing fits network requests better. In both cases, also reduce the work itself.
useDeferredValue(query) lets the input update immediately. The list re-renders with the deferred value in the background. That background render is interruptible, so a new keystroke abandons it. There is no fixed delay: on fast devices the list updates almost instantly. It only helps if the slow list is wrapped in memo. Then the list can skip rendering while the deferred value is unchanged.
Debouncing waits a fixed time after the user stops typing. It is still the right tool for reducing network requests. But it adds delay even on fast devices.
Reduce the work:
- Cache the filtered result with
useMemo. - Precompute lowercase search keys.
- Virtualize the results, so only the visible rows render.
For very large datasets, filter on the server or in a Web Worker. A Web Worker is a background thread that does not block the page.
useDeferredValuekeeps the input urgent and makes the list render interruptible.- It only helps if the slow list is wrapped in
memo. - Debouncing adds a fixed delay and is good for network requests.
- Reduce the work with
useMemo, precomputed keys and virtualization. - Use the server or a Web Worker for huge datasets.