Mitä ovat samanaikaiset ominaisuudet, kuten useTransition ja useDeferredValue?

Question

Accepted Answer

Concurrent React voi **keskeyttää, keskeyttää ja priorisoida** renderöintiä. Merkitset joitakin päivityksiä **ei-kiireellisiksi siirtymiksi**, jotta kiireelliset päivitykset (kuten kirjoittaminen) pysyvät reagoivina jopa raskaiden uudelleenrenderöintien ollessa odottamassa.

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

**Miksi tämä auttaa:** valtavan listan suodattaminen on kallista. Ilman siirtymää React estäisi syötteen uudelleenrenderöinnin aikana tuhansia rivejä, joten kirjoittaminen tuntuu hämärältä. Käärimällä kallis päivitys `startTransition`-funktioon React pitää syötteen päivitykset korkealla prioriteetilla ja voi **hylätä** käynnissä olevan suodatinrenderöinnin, jos kirjoitat toisen näppäimen — ei vanhoja, lentäviä ruutuja.

## useDeferredValue

Yksinkertaisempi vaihtoehto, kun et hallitse asetinta — se antaa sinulle "myöhästyneen" kopion arvosta:

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

## Milloin käyttää

Käytä näitä **kalliille, ei-kiireellisille käyttöliittymäpäivityksille**, joita ohjaa nopea käyttäjän syöte: etsi samalla kun kirjoitat suurissa tietojoukoissa, välilehtien vaihdot, jotka renderöivät raskasta sisältöä, suuret suodatetut/lajiteltu taulukot. Yksinkertaisissa sovelluksissa ne ovat tarpeettomia — ne loistavat, kun renderöinti on tarpeeksi raskas aiheuttaakseen näkyvän syötön viiveen.