Mik azok az egyidejű funkcionalitások, mint a useTransition és useDeferredValue?

Question

Accepted Answer

Az egyidejű React képes **megszakítani, szüneteltetni és prioritást adni** a renderelési munkának. Néhány frissítést **nem sürgős átmenetként** jelöl meg, hogy a sürgős frissítések (például gépelés) receptívek maradjanak, még akkor is, ha egy nehéz újrarenderelés függőben van.

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

**Miért segít ez:** egy hatalmas lista szűrése költséges. Átmenet nélkül a React blokkolná a bemenetet ezernyi sor újrarenderelése közben, így a gépelés lagynak érezne magát. A drága frissítést `startTransition` -ba csomagolva a React magas prioritásúként tartja az bemeneti frissítéseket és **dobhat el** egy folyamatban lévő szűrési renderelést, ha egy másik billentyűt gépel — nincs elavult, vibrálós keret.

## useDeferredValue

Egy egyszerűbb alternatíva, ha nem kontrollálod a setter-t — az érték egy "késedelmezett" másolatát adja:

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

## Mikor kell használni

Használd ezeket a **drága, nem sürgős felhasználóifelület-frissítésekhez**, amelyeket gyors felhasználói bemenet vezérel: keresés-ahogy-gépelsz nagy adathalmazokon, fülváltások, amelyek nehéz tartalmat renderelnek, nagy szűrt/rendezett táblázatok. Az egyszerű alkalmazások esetében szükségtelenek — akkor ragyognak, amikor a renderelés kellően nehéz ahhoz, hogy látható bemeneti lag okozzon.