Czym są funkcje współbieżne takie jak useTransition i useDeferredValue?

Question

Accepted Answer

Concurrent React może **przerwać, wstrzymać i ustalić priorytety** pracy renderowania. Oznaczasz niektóre aktualizacje jako **nieurgentne przejścia**, dzięki czemu pilne aktualizacje (takie jak pisanie) pozostają responsywne nawet podczas oczekiwania na ciężkie re-renderowanie.

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

**Dlaczego to ważne:** filtrowanie ogromnej listy jest kosztowne. Bez przejścia React blokowałby wejście podczas renderowania tysięcy wierszy, więc pisanie byłoby powolne. Zawijając drogą aktualizację w `startTransition`, React utrzymuje aktualizacje wejścia o wysokim priorytecie i może **wyrzucić** renderowanie filtrowania w trakcie, jeśli wpiszesz inny klawisz — bez starych, jankowych klatek.

## useDeferredValue

Prostszą alternatywę, gdy nie kontrolujesz settera — daje ci "opóźnioną" kopię wartości:

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

## Dlaczego to ważne

Używaj tego dla **drogich, nieurgentnych aktualizacji UI** napędzanych szybkim wejściem użytkownika: wyszukiwanie podczas pisania na dużych zbiorach danych, przełączanie kart renderujących ciężką zawartość, duże filtrowane/sortowane tabele. W przypadku prostych aplikacji są niepotrzebne — błyszczą, gdy renderowanie jest na tyle ciężkie, że powoduje widoczne opóźnienie wejścia.