Reactjs Usedeferredvalue Deep Low Priority Render Input Lag

Definisi

useDeferredValue mengembalikan versi "tertunda" dari nilai yang mungkin mahal untuk di-render. Berbeda dengan useTransition (membungkus update state), useDeferredValue cocok saat nilai datang dari luar (prop, URL, event tanpa control state).

Kapan dipakai

Pakai saat:

• Input pencarian memicu render berat tapi kamu tidak punya state lokal untuk di-bungkus transition.
• Nilai berasal dari parent/prop dan ingin versi lama tetap tampil saat yang baru sedang diproses.

Jangan pakai untuk update yang harus instan (typing di field sendiri).

Cara kerja

jsx

function Search({ list }) {
  const [query, setQuery] = useState('');
  const deferred = useDeferredValue(query); // versi low-priority
  const isStale = query !== deferred;
 
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      {isStale && <Spinner />}
      <Results q={deferred} list={list} />
    </>
  );
}

Saat query berubah cepat, deferred "ngulur" ke nilai terbaru di render berikutnya yang tidak mendesak.

Struktur alur

Catatan implementasi

• useDeferredValue tidak membatalkan fetch; untuk async, kombinasikan dengan useTransition atau abort.
• Bandingkan query !== deferred untuk indikator "still updating".
• Cocok untuk list filter besar; input tetap responsif.
• Di React 18+ concurrent; pastikan root pakai createRoot.

Kesalahan umum

• Pakai untuk state sendiri: useTransition lebih tepat bila kamu punya setState.
• Bandingkan tanpa isStale: user tidak tahu sedang memproses.
• Deferred dikirim ke effect async: perlu abort agar tidak race.
• Salah root: tanpa concurrent root, deferred tidak optimal.

Referensi terkait

• Concurrent Features: useTransition, useDeferredValue, Suspense Data
• useId dan useTransition Mendalam
• React Server Components: RSC, Client Boundary