useDeferredValue nedir? Arama filtresinde debounce yerine ne zaman tercih edilir?

useDeferredValue(value), bir değerin geride kalan bir kopyasını döndürür. React önce acil güncellemeyi (input'a yazılan harf) render eder, ardından deferred değerle pahalı render'ı düşük öncelikle ve kesilebilir (interruptible) şekilde yapar. Yeni bir tuşa basılırsa yarım kalan render atılır.

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

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <div style={{ opacity: isStale ? 0.6 : 1 }}>
        <SlowList items={items} query={deferredQuery} />
      </div>
    </>
  );
}

const SlowList = memo(function SlowList({ items, query }) {
  const filtered = items.filter((i) => i.name.toLowerCase().includes(query.toLowerCase()));
  return filtered.map((i) => <Row key={i.id} item={i} />);
});

SlowList'in memo ile sarılması önemlidir; aksi hâlde acil render'da da yeniden çizilir ve kazanç kalmaz (React Compiler bunu otomatik yapabilir).

Debounce ile karşılaştırma

Ne zaman hangisi?

• Veri zaten client'ta ve sorun ağır render ise: useDeferredValue.
• Her tuş vuruşunda API isteği atılıyorsa: debounce (veya ikisi birlikte).
• useTransition benzer işi yapar ama state güncellemesini siz sararsınız; useDeferredValue ise değeri kontrol etmediğiniz durumlarda (prop olarak gelen değer) kullanışlıdır.