Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.
Exercise 1 of 2
Three questions on useDeferredValue — the isStale pattern, when to prefer it over useTransition, and how it skips intermediate renders.
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const isStale = query !== deferredQuery;When is isStale === true?
useTransition vs useDeferredValue: when do you reach for useDeferredValue?
const deferredQuery = useDeferredValue(query); // User types: "r" → "re" → "rea" → "reac" → "react" // ...all in 100ms
How many times does the component re-render with deferredQuery updates?
0/3 answered
Exercise 2 of 2
Live editor: add useDeferredValue so an expensive list renders lazily without blocking the input — and detect staleness with query !== deferredQuery.
Task
The input lags because ExpensiveList re-renders on every keystroke (60ms block each time). You cannot control the parent's state update — but you can defer at the consumption point.
Add useDeferredValue(query) and pass the deferred copy to ExpensiveList. The input stays responsive; the list catches up lazily. Use query !== deferredQuery to show a "Updating…" indicator.