useDeferredValue
- React course
- Expert
- Lesson 15/32
- 4 min
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.
Practice 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.
Starter code
// Write the Search component hereSample 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;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match useDeferredValue concepts
| Term | Meaning |
|---|---|
useDeferredValue |
Delays a value |
useMemo |
Caches a computation |
query |
Current value |
deferred |
Old value a bit longer |
2 What does useDeferredValue do?
- Updates a value immediately
- Deletes state
- Hides a component
- Delays a value from reaching render Correct answer
Explanation: useDeferredValue delays the propagation of a value.
3 Fill in the blank: get the deferred value
const [query, setQuery] = useState('');
const deferredQuery = use____Value(query);const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);Explanation: useDeferredValue gives the deferred value.