Что такое конкурентные функции, такие как useTransition и useDeferredValue?

Question

Accepted Answer

Concurrent React может **прерывать, приостанавливать и расставлять приоритеты** для работы отрисовки. Вы отмечаете некоторые обновления как **неспешные переходы**, чтобы срочные обновления (например, ввод текста) оставались отзывчивыми даже во время ожидания тяжелой переотрисовки.

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

**Почему это важно:** фильтрация огромного списка дорого обходится. Без перехода React заблокировал бы ввод при переотрисовке тысяч строк, поэтому ввод кажется медленным. Обернув дорогостоящее обновление в `startTransition`, React держит обновления ввода с высоким приоритетом и может **отбросить** выполняемую фильтрацию, если вы нажмете другую клавишу — без устаревших и рывков кадров.

## useDeferredValue

Более простая альтернатива, когда вы не контролируете setter — дает вам «отстающую» копию значения:

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

## Когда использовать

Используйте эти функции для **дорогостоящих неспешных обновлений UI**, управляемых быстрым вводом пользователя: поиск по мере ввода больших наборов данных, переключение вкладок, которые отрисовывают тяжелый контент, большие отфильтрованные/отсортированные таблицы. Для простых приложений они не требуются — они сияют, когда отрисовка достаточно тяжелая, чтобы вызвать заметное отставание ввода.