Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить "transition" у життєвому циклі рендера?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке "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:

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

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

---

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

1. **Оновлення ініціюється**
  - React отримує кілька викликів `setState`.
  - Позначає, які з них термінові, а які - перехідні (`startTransition`).
2. **Фаза Render**
  - React починає обчислювати Virtual DOM для переходу.
  - Якщо надходить термінове оновлення - React **призупиняє** цей рендер.
  - Зберігає прогрес і пізніше відновлює.
3. **Commit Phase**
  - Щойно всі потрібні дані готові, React фіксує зміни в DOM.
  - Термінові оновлення завжди комітяться раніше перехідних.
4. **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()` | Дає контроль розробнику |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати727 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.