React: How does useDeferredValue work?

useDeferredValue is a hook that returns a "deferred" (older) version of the value so that expensive updates do not slow down the interface.

Simple analogy: Imagine you are watching a movie and have slow internet.

• Without useDeferredValue: every keystroke lags because the video tries to re-encode to HD simultaneously with your input.
• With useDeferredValue: you type text (smooth input), and the video loads with a delay in the background.

Difference from useTransition:

• useTransition — you control WHICH update to defer (via startTransition).
• useDeferredValue — you defer a VALUE (React itself decides when to update the interface).

How it works:

1import { useDeferredValue } from 'react';
2
3function SearchResults({ query }) {
4    const deferredQuery = useDeferredValue(query);  // Deferred version
5    
6    // Use deferredQuery for expensive calculations
7    const results = useMemo(() => {
8        return bigList.filter(item => item.name.includes(deferredQuery));
9    }, [deferredQuery]);
10    
11    const isStale = query !== deferredQuery;
12    
13    return (
14        <div style={{ opacity: isStale ? 0.5 : 1 }}>
15            <ResultsList items={results} />
16        </div>
17    );
18}

When to use:

1. Search with many results.
2. Complex filters (calendar, datatable).
3. When you need the input to remain responsive during heavy processing.