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(value: string) {
    setInput(value); // urgent, langsung
    startTransition(() => {
        setQuery(value); // transition, boleh lambat
    });
}

useDeferredValue

tsx

const deferred = useDeferredValue(query);
// render pakai deferred di komponen berat

Suspense untuk data

tsx

<Suspense fallback={<Skeleton />}>
    <HeavyList query={deferred} />
</Suspense>

Struktur alur

Contoh kombinasi

tsx

const [query, setQuery] = useState('');
const deferred = useDeferredValue(query);
const [isPending, startTransition] = useTransition();
 
<input
    value={query}
    onChange={(e) => {
        setQuery(e.target.value);
        startTransition(() => setFilter(e.target.value));
    }}
/>
{isPending ? <Spinner /> : <Results q={deferred} />}

Catatan implementasi

• Gunakan isPending untuk indikator loading pada transition, bukan spinner global.
• useDeferredValue berguna saat kamu tidak punya kontrol langsung atas pemanggil setState.
• Suspense butuh data source yang mendukung suspense (atau wrapper use()).

Kesalahan umum

• Over-pakai transition: update kecil malah dibungkus transition, menambah kompleksitas tanpa manfaat.
• Salah mengira sama dengan debounce: transition tidak mengurangi jumlah render, hanya menjadwalkan ulang agar tidak memblokir input.
• Mencampur urgent dan transition: state yang harus instan malah dimasukkan ke startTransition, UI terasa lemot.
• Suspense tanpa batas: membungkus seluruh tree hingga fallback terlalu besar, UX malah buruk.

Referensi terkait

• Hooks Dasar React.js: useState, useEffect, useMemo, useCallback, useRef
• Performance Profiling React.js: useTransition, useDeferredValue, Memoization
• State Management Patterns React.js