Defer a value so expensive children lag behind urgent input.
Section: Performance and Concurrency Hooks
useDeferredValue delay expensive rendering
tsx
tsx
const deferredQuery = useDeferredValue(query);
const results = useMemo(() => search(items, deferredQuery), [items, deferredQuery]);Explanation
Useful for search UIs where input should stay responsive even if results are expensive to compute.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Performance and Concurrency Hooks
useSyncExternalStore subscribe to external state
Read and subscribe to an external store consistently.
use API with context or promise
Read context or promise values with the `use` API.