React
useDeferredValue
Learn to defer the re-render of a value with useDeferredValue.
useDeferredValue
useDeferredValue delays a value from reaching the render. When you write const deferred = useDeferredValue(query) the deferred value carries the old value a bit longer.
This keeps the input smooth while filtering large lists. React postpones the heavy render; the user does not experience freezing while typing.
You combine it with useMemo to compute based on the deferred value.
Large list filtering
Consider a search box and a list of 10000 items. Filtering the whole list on every keystroke blocks the main thread.
With useDeferredValue you take a deferredQuery and compute results with useMemo based on it. The input updates immediately and the heavy filtering runs in the background.
React shows the old results and swaps when the new ones are ready.
Exercise Write the Search component
Write Search. Take an items prop. Keep query with useState(''), get deferredQuery with useDeferredValue(query), compute items.filter(i => i.includes(deferredQuery)) with useMemo. Show <input value={query} onChange={e => setQuery(e.target.value)} /> and inside a <ul> map results. Export it.
Show example solution
import { useState, useDeferredValue, useMemo } from 'react';
function Search({ items }) {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const results = useMemo(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);
return (
<div>
<input value={query} onChange={e => setQuery(e.target.value)} />
<ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>
</div>
);
}
export default Search;
Test yourself
-
Match useDeferredValue concepts
- useDeferredValue
- Delays a value
- useMemo
- Caches a computation
- query
- Current value
- deferred
- Old value a bit longer
-
What does useDeferredValue do?
- Updates a value immediately
- Deletes state
- Hides a component
- Delays a value from reaching render
Show answer
Delays a value from reaching render — useDeferredValue delays the propagation of a value.
-
Fill in the blank: get the deferred value
const [query, setQuery] = useState('');
const deferredQuery = use____Value(query);
Show answer
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
Next lesson: Summary - Concurrent features
