Apa saja fitur concurrency seperti useTransition dan useDeferredValue?

Question

Accepted Answer

Concurrent React dapat **mengganggu, menjeda, dan memprioritaskan** pekerjaan rendering. Anda menandai beberapa update sebagai **transisi non-urgen** sehingga update urgen (seperti mengetik) tetap responsif bahkan saat render ulang yang berat sedang tertunda.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**Mengapa ini membantu:** memfilter daftar besar itu mahal. Tanpa transisi, React akan memblokir input saat merender ulang ribuan baris, sehingga mengetik terasa lambat. Dengan membungkus update mahal dalam `startTransition`, React menjaga update input dengan prioritas tinggi dan dapat **membuang** render filter yang sedang berjalan jika Anda mengetik kunci lain — tidak ada frame yang usang atau tersentak-sentak.

## useDeferredValue

Alternatif yang lebih sederhana ketika Anda tidak mengontrol setter — memberikan Anda salinan nilai yang "tertinggal":

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## Mengapa ini penting

Gunakan ini untuk **update UI yang mahal dan non-urgen** yang didorong oleh input pengguna yang cepat: search-as-you-type di atas dataset besar, perubahan tab yang merender konten berat, tabel yang disaring/diurutkan besar. Untuk aplikasi sederhana mereka tidak perlu — mereka bersinar ketika render cukup berat untuk menyebabkan lag input yang terlihat.