useDeferredValue for Input Debouncing

In this lesson you will use useDeferredValue to delay re-rendering of expensive parts of the UI while keeping controlled inputs snappy and responsive.

useDeferredValue accepts a value and returns a deferred version of it. The deferred value lags behind the current value during urgent renders, allowing React to update the UI in two steps: fast for input, deferred for expensive output.

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// query updates immediately on keystroke
// deferredQuery updates when React has capacity