What is the useDeferredValue hook in React 18?

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.