Što su concurrent karakteristike poput useTransition i useDeferredValue?

Question

Accepted Answer

Concurrent React može **prekinuti, pauzirati i prioritizirati** rad renderiranja. Označite neke ažuriranja kao **ne-hitan prijelaze** kako bi hitna ažuriranja (poput tipkanja) ostala odgovorna čak i dok je teško ponovno renderiranje na čekanju.

## 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
```

**Zašto ovo pomaže:** filtriranje ogromne liste je skupo. Bez prijelaza, React bi blokirao ulaz tijekom ponovno renderiranja tisuća redaka, tako da pisanje terasa teško. Upakiravanjem skupog ažuriranja u `startTransition`, React čuva ažuriranja ulaza visoke prioritete i može **baciti** ažuriranje filtera u tijeku ako ukucate drugi ključ — bez zastarjelih, teških okvira.

## useDeferredValue

Jednostavnija alternativa kada ne kontrolirate setter — daje vam "zaostajuću" kopiju vrijednosti:

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

## Kada koristiti

Koristite ih za **skupa, ne-hitna UI ažuriranja** vođena brzim korisnikom ulazom: search-as-you-type preko velikih skupova podataka, promjene jezičaka koje renderiraju teški sadržaj, velike filtrirane/sortirane tablice. Za jednostavne aplikacije nisu potrebne — sjajno sjaje kada je renderiranje dovoljno teško da uzrokuje vidljiv lag ulaza.