Reactjs Concurrent Features Usetransition Usedeferredvalue Starttransition Suspense Data

Definisi

Concurrent features adalah API yang memungkinkan React memisahkan update urgent (input langsung, hover) dari update transition (render berat, list besar) supaya UI tetap responsif. API utamanya: useTransition, useDeferredValue, startTransition, dan Suspense untuk data.

Kapan dipakai

• useTransition / startTransition: saat perubahan state memicu render mahal (filter ribuan baris, ganti route konten berat).
• useDeferredValue: saat nilai (misal query string) dipakai di render berat tapi tidak harus update seketika.
• Suspense untuk data: saat mengambil data async dan ingin fallback sementara tanpa memblokir tree lain.

Ini bukan pengganti debounce/throttle: debounce menunda eksekusi, transition menunda render hasil sambil tetap menunjukkan input responsif.

Cara kerja

useTransition

tsx

const [isPending, startTransition] = useTransition();
 
function onChange