Summary - Concurrent features
- React course
- Expert
- Lesson 16/32
- 5 min
Write a fluid list with useDeferredValue on a search input.
Summary - Concurrent features
In this group you learned Concurrent React and the useTransition and useDeferredValue hooks.
Concurrent rendering makes rendering interruptible; urgent updates run immediately and heavy updates in the background. This keeps user input smooth.
Even with large lists the app does not freeze; the user gets a smooth experience. Now you will write a concurrent search component.
Practice Write the ConcurrentSearch component
Write ConcurrentSearch. Take an items prop. Keep query with useState(''), get deferred with useDeferredValue(query), compute items.filter(i => i.includes(deferred)) with useMemo. Show <input value={query} onChange={e => setQuery(e.target.value)} /> and inside a <ul> map results to <li key={i}>{r}</li>. Export it.
Starter code
// Write the ConcurrentSearch component hereSample solution
import { useState, useDeferredValue, useMemo } from 'react';
function ConcurrentSearch({ items }) {
const [query, setQuery] = useState('');
const deferred = useDeferredValue(query);
const results = useMemo(() => items.filter(i => i.includes(deferred)), [items, deferred]);
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 ConcurrentSearch;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is wrong?
- Concurrent blocks rendering Correct answer
- useDeferredValue delays a value
- isPending gives the pending state
- useTransition marks a deferred update
Explanation: Concurrent does not block; it makes rendering interruptible.
2 Fill in the blank: compute with useMemo
const results = ____(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);const results = useMemo(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);Explanation: useMemo caches a computation.
3 Match concepts
| Term | Meaning |
|---|---|
useTransition |
Deferred update |
useDeferredValue |
Delays a value |
Concurrent |
Makes render interruptible |
isPending |
Pending state |