Apakah ciri-ciri serentak seperti useTransition dan useDeferredValue?

Question

Accepted Answer

React serentak boleh **mengganggu, menjeda, dan mengutamakan** kerja rendering. Anda menandakan beberapa kemas kini sebagai **peralihan tidak mendesak** supaya kemas kini mendesak (seperti menaip) tetap responsif walaupun render semula yang berat sedang menunggu.

## 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:** menapis senarai yang besar mahal. Tanpa peralihan, React akan memblokir input semasa render semula ribuan baris, jadi menaip terasa lambat. Dengan membungkus kemas kini mahal dalam `startTransition`, React mengekalkan kemas kini input keutamaan tinggi dan boleh **membuang** render penapis yang sedang berlangsung jika anda menaip kunci lain — tidak ada bingkai yang basi, tersentak.

## useDeferredValue

Alternatif yang lebih mudah apabila anda tidak mengawal setter — ia memberi anda salinan nilai yang "ketinggalan":

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

## Bila hendak digunakan

Gunakan ini untuk **kemas kini UI yang mahal dan tidak mendesak** didorong oleh input pengguna yang cepat: carian-sementara-anda-menaip ke atas set data yang besar, tukar tab yang menghasilkan kandungan berat, jadual yang disaring/disusun besar. Untuk apl mudah ia tidak perlu — ia bersinar apabila render cukup berat untuk menyebabkan ketinggalan input yang ketara.