Q308: What is the useDeferredValue hook? - React & Modern Frontend (445 Qs)

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

jsx

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 (
  <div>
    <input 
      value={query} 
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
    <div style={{ opacity: isStale ? 0.5 : 1 }}>
      <SearchResults query={deferredQuery} />
    </div>
  </div>
);
}

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