javascript / intermediate
Snippet
Deferring Updates with useDeferredValue
The useDeferredValue hook lets you defer re-rendering a non-urgent part of the UI. It allows the UI to stay responsive to urgent updates (like typing in an input) while the heavier computation (like filtering a long list) waits for a idle moment.
snippet.js
1
2
3
4
const [query, setQuery] = useState('');const deferredQuery = useDeferredValue(query);return <SearchResults query={deferredQuery} />;
react
Breakdown
1
const deferredQuery = useDeferredValue(query);
Returns a 'deferred' version of the value that lags behind the latest update during heavy renders.
2
return <SearchResults query={deferredQuery} />;
The component receives the slower-moving value, preventing the main thread from locking up.