What is the useDeferredValue hook?

The useDeferredValue hook is used to defer updating a part of the UI to keep other parts responsive. It accepts a value and returns a "deferred" version of that value that may lag behind. This is useful for optimizing performance when rendering expensive components.

Syntax

const deferredValue = useDeferredValue(value);

Example: Search with Deferred Results

import { useState, useDeferredValue, useMemo } from 'react';

function SearchResults({ query }) {
// Expensive computation or large list filtering
const results = useMemo(() => {
return largeDataSet.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
);
}, [query]);

return (
<ul>
{results.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
);
}

function SearchPage() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const isStale = query !== deferredQuery;

return (
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
<SearchResults query={deferredQuery} />
);
}

The input stays responsive while the expensive SearchResults component re-renders with a slight delay using the deferred value.