Jaké jsou souběžné funkce, jako jsou useTransition a useDeferredValue?

Question

Accepted Answer

Concurrent React může **přerušit, pozastavit a určit prioritu** práce při vykreslování. Označíte některé aktualizace jako **neprioritní přechody**, aby urgentní aktualizace (jako psaní) zůstaly responzivní, i když je čekajícímu těžké opětovné vykreslení.

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

**Proč to pomáhá:** filtrování obrovského seznamu je nákladné. Bez přechodu by React blokoval vstup při vykreslování tisíců řádků, takže psaní se zdá pomalé. Zabalením drahé aktualizace do `startTransition` React udržuje aktualizace vstupu s vysokou prioritou a může **vyhodit** probíhající filtrování, pokud napíšete další klávesu — žádné zastaralé, trhavé snímky.

## useDeferredValue

Jednoduší alternativa, když neovládáte setter — dává vám "zpožděnou" kopii hodnoty:

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

## Kdy použít

Těchto použijte pro **drahé, neprioritní aktualizace UI** řízené rychlým vstupem uživatele: vyhledávání při psaní v rozsáhlých datasetech, přepínání karet, které vykreslují těžký obsah, velké filtrované/seřazené tabulky. U jednoduchých aplikací jsou zbytečné — září, když je vykreslování dost těžké na to, aby způsobilo viditelné zpoždění vstupu.