Що робить "transition" у життєвому циклі рендера?

ReactMiddle~3 хв читання

Що таке "transition" у React

Transition (перехід) - це спосіб сказати React: "Ця частина оновлення не термінова - зроби її у фоні, коли буде зручно, але не блокуй при цьому інтерфейс".

React використовує transitions, щоб розрізняти два типи оновлень:

Тип оновлення	Приклад	Пріоритет	Що робить React
Термінове (urgent)	Ввід тексту, клік, скрол	Високий	Виконується одразу, без пауз
Перехідне (transition)	Підвантаження списку, фільтрація, навігація	Низький / середній	Може бути відкладене, перерване і відновлене

Де переходи з'являються у життєвому циклі

Transition - це частина render phase. React під час рендера перевіряє: яке оновлення зараз відбувається - термінове чи перехідне, і вирішує, як планувати роботу.

Переходи не впливають на commit phase, але змінюють поведінку render phase:

Фаза	Опис	Що робить transition
Render Phase	React обчислює, що потрібно змінити	Переходи можуть виконуватися у фоні і перериватися
Commit Phase	React фіксує зміни в DOM	Відбувається тільки після завершення переходу
Post Commit	Ефекти, `useEffect`, `useLayoutEffect`	Виконуються, коли transition завершено

Приклад на практиці

javascript

import { useState, startTransition } from 'react';

function SearchApp() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value); // термінове оновлення (ввід тексту)

    startTransition(() => {
      // перехідне (фонове) оновлення
      const filtered = bigData.filter(item => item.includes(value));
      setResults(filtered);
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      <List results={results} />
    </>
  );
}

Що робить React:

Користувач друкує -> термінове оновлення setQuery відпрацьовує миттєво. -> React одразу оновлює <input> (commit phase).
startTransition позначає фільтрацію (setResults) як нетермінову. -> React може призупинити її, якщо користувач продовжує друкувати.
Щойно потік вільний - React добудовує Virtual DOM і виконує commit.

Результат: поле вводу ніколи не гальмує, а список підвантажується плавно, без блокувань.

Як React використовує transitions у життєвому циклі рендера

Оновлення ініціюється

React отримує кілька викликів setState.
Позначає, які з них термінові, а які - перехідні (startTransition).

Фаза Render

React починає обчислювати Virtual DOM для переходу.
Якщо надходить термінове оновлення - React призупиняє цей рендер.
Зберігає прогрес і пізніше відновлює.

Commit Phase

Щойно всі потрібні дані готові, React фіксує зміни в DOM.
Термінові оновлення завжди комітяться раніше перехідних.

Post-Commit

Ефекти (useEffect) і useLayoutEffect викликаються після завершення commit.
React гарантує, що UI стабільний.

Як transitions впливають на життєвий цикл хуків

Хук	Що відбувається під час transition
`useState`	Оновлення всередині `startTransition()` отримують низький пріоритет
`useEffect`	Виконується тільки після commit переходу
`useLayoutEffect`	Все ще синхронний, але може бути відкладений до завершення transition
`useDeferredValue`	Аналог переходу для окремого значення: відкладає його оновлення
`useTransition`	Дозволяє керувати переходом і дізнатися, чи триває він зараз (`isPending`)

`useTransition()` у дії

javascript

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setList(expensiveCompute());
});

return (
  <>
    {isPending && <Spinner />}
    <List items={list} />
  </>
);

Тут:

startTransition робить setList низькопріоритетним;
isPending = true, поки React не завершив commit для переходу;
React може скасувати і перерахувати рендер, якщо під час переходу користувач ввів щось нове.

Чому transitions такі важливі для життєвого циклу

До React 18	Після React 18 (з transitions)
Усі оновлення виконувалися одразу	React розрізняє термінові і фонові
Render phase блокувала потік	Render можна перервати і відновити
UI "застигав" при важких обчисленнях	UI залишається чуйним
Немає контролю над пріоритетом	Можна керувати пріоритетом через `startTransition()`

Візуально

javascript

Подія → setState() → термінове оновлення (Render + Commit)
                    ↳ startTransition() → фоновий Render (може бути призупинений)
                                           ↓
                                           Commit → useEffect → UI готовий

Підсумок

Transition - це механізм, вбудований у життєвий цикл React 18, який дозволяє рендеру бути пріоритетним, плавним і неблокуючим.

Що робить	Як впливає
Позначає оновлення як "нетермінові"	React може відкласти або перервати рендер
Розділяє термінові і фонові зміни	UI залишається чуйним
Працює всередині render-phase Fiber	Керує плануванням оновлень
Використовується з `startTransition()` або `useTransition()`	Дає контроль розробнику

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.