What is the useDeferredValue hook in React 18?
Why Interviewers Ask This
This question targets practical, hands-on experience with React.js. Interviewers want to see if you've worked with these concepts in real projects, not just read about them. Strong answers include concrete examples.
Answer
useDeferredValue (React 18) accepts a value and returns a deferred (possibly stale) version of it. React will initially render with the old deferred value, then re-render with the new value in the background when the browser is idle. This prevents expensive renders from blocking user input. Use case: const [query, setQuery] = useState(""); const deferredQuery = useDeferredValue(query); return <><input onChange={e => setQuery(e.target.value)} /><SearchResults query={deferredQuery} /></>;. The input stays responsive (uses query), while the expensive SearchResults renders with the deferred value, lagging behind if it's slow. Optimization: pair with React.memo. Wrap SearchResults with React.memo so it only re-renders when deferredQuery changes, not when query changes. useDeferredValue vs useTransition: useTransition wraps the state update call; useDeferredValue defers a derived value from a state you do not control (e.g., from props or a third-party hook). Use useDeferredValue when you cannot modify the state update.
Common Mistake
Rushing to answer is a common mistake. Take two seconds to structure your response: definition → example → trade-off. This structure makes complex React.js answers easy to follow.