Что такое useTransition?

`useTransition` — это хук React 18 для конкурентного рендеринга: он помечает обновление состояния как несрочное (transition), чтобы оно не блокировало срочные обновления вроде ввода.

Проблема

Тяжёлый ре-рендер (фильтрация большого списка) при вводе в поле «тормозит» интерфейс — ввод лагает.

Решение

useTransition разделяет обновления на срочные (ввод) и несрочные (перерисовка списка):

const [isPending, startTransition] = useTransition();
const [query, setQuery] = useState('');
const [list, setList] = useState([]);

function handleChange(e) {
  setQuery(e.target.value);          // срочно — поле обновляется мгновенно
  startTransition(() => {
    setList(filterHugeList(e.target.value)); // несрочно — не блокирует ввод
  });
}

• isPending — флаг, что transition в процессе (можно показать индикатор).
• startTransition — оборачивает несрочное обновление.

Что даёт

• Срочные обновления (ввод, клик) остаются отзывчивыми.
• Несрочные React может прервать и отложить, не блокируя UI.

useTransition против useDeferredValue

• useTransition — оборачивает обновление состояния.
• useDeferredValue — откладывает значение (когда не контролируешь setState).

Коротко для собеседования

useTransition (React 18) помечает обновление как несрочное через startTransition, чтобы тяжёлый ре-рендер не блокировал срочные обновления (ввод). Даёт isPending для индикатора. Аналог для значений — useDeferredValue. Часть конкурентного рендеринга.