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

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

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

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

Контент

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

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

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

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

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

## Що таке React Fiber

> **React Fiber** - це *нова реалізація внутрішнього механізму React*,
> яка відповідає за те, **як і коли** виконується рендеринг компонентів.

Іншими словами:
**Fiber - це "новий двигун" React**, який керує всім процесом:

- викликом компонентів,
- оновленням Virtual DOM,
- плануванням роботи,
- і запуском методів життєвого циклу (`componentDidMount`, `useEffect` тощо).

React перейшов на Fiber, починаючи з **React 16**, щоб зробити рендер **покроковим, призупинюваним і пріоритетним**.

---

## До Fiber (React 15 і нижче)

- React мав **синхронний рендеринг**:
коли відбувалося оновлення, React **проходив усе дерево цілком**, поки не закінчить.
- Великі дерева блокували головний потік →
сторінка "зависала" під час рендеру.
- Усі життєві цикли (`componentWillMount`, `componentDidMount`, `componentDidUpdate`) викликалися **одночасно**, без можливості оптимізації пріоритету.

---

## Після Fiber (React 16+)

Fiber перетворив React на **кооперативний планувальник задач**.
Тепер рендеринг - це **поетапний і пріоритетний процес**, де React може:

- Розбити роботу на маленькі шматки (fiber nodes)
- Призупиняти і поновлювати рендер
- Переривати менш важливу роботу (наприклад, анімація або введення користувача має пріоритет)
- Точно керувати викликом життєвих циклів

---

## Що таке Fiber Node

Кожен компонент (функціональний, класовий або хост-елемент) представлений внутрішнім об'єктом - **Fiber**.

Fiber - це вузол у зв'язаному списку, який зберігає:

- посилання на **тип компонента** (`function`, `class`, `div` тощо),
- **поточний стан** і **пропси**,
- **посилання на батька, нащадків і сусідів**,
- інформацію про **пріоритет** роботи (у якому порядку виконувати),
- **ефекти** (що потрібно зробити в commit phase).

Це дозволяє React точно знати, **де він зупинився**, якщо потрібно перервати роботу і потім продовжити.

---

## Зв'язок Fiber Architecture і життєвого циклу

### React тепер ділить життєвий цикл на 2 фази:

| Фаза | Що робить | Викликає методи |
| --- | --- | --- |
| **Render phase** | Обчислює, *що потрібно змінити* | `shouldComponentUpdate`, `render` |
| **Commit phase** | Застосовує зміни до DOM | `componentDidMount`, `componentDidUpdate`, `useLayoutEffect`, `useEffect` |

---

### Як Fiber це реалізує:

1. **Render Phase (реконсиляція)**
Fiber проходить по дереву **Fiber-вузлів** і обчислює, які зміни потрібні.
  - Ця фаза може бути **призупинена, поновлена або скасована**.
  - Тут React може "розбити" роботу і планувати її за пріоритетами.
  - Наприклад, користувач клікнув → React може відкласти рендер неважливих частин UI.
Викликаються:
  - `shouldComponentUpdate`
  - `render()` (у класів)
  - тіло функціональних компонентів
**DOM ще не оновлюється** в цій фазі.

---

2. **Commit Phase (застосування змін)**
Коли Fiber завершив розрахунки - він **фіксує (commit)** зміни:
  - оновлює DOM,
  - викликає post-render хуки.
Викликаються:
  - `componentDidMount`
  - `componentDidUpdate`
  - `componentWillUnmount`
  - `useLayoutEffect`
  - `useEffect`
Ця фаза **завжди синхронна** - React не може її перервати.

---

### Приклад візуально

```javascript
Fiber: початок Render Phase
    ↓
аналіз змін → diff Virtual DOM
    ↓
може бути перерваний або призупинений
    ↓
Fiber: Commit Phase
    ↓
оновлення DOM + виклик життєвих циклів
```

---

## Чому Fiber важливий для життєвого циклу

| До Fiber | Після Fiber |
| --- | --- |
| Усі компоненти оновлювалися підряд, без зупинки | Рендер можна призупинити і поновити |
| Методи викликалися строго послідовно | Методи виконуються за різних пріоритетів |
| React не розумів пріоритети | React знає, які оновлення важливіші |
| Рендеринг блокував UI | UI лишається відгукливим під час рендеру |

---

## Приклад: як це впливає на ефекти

```javascript
useEffect(() => {
  console.log('ефект');
  return () => console.log('очищення');
}, [value]);
```

- У **render phase** React викликає компонент і вирішує, чи потрібне оновлення.
- У **commit phase** React застосовує зміни і викликає `useEffect`.
- Якщо оновлення відкладається (низький пріоритет), ефект не викликається, поки React не дійде до commit.
- Fiber стежить за тим, щоб **cleanup** викликався строго перед новим ефектом.

---

## Concurrent Rendering (React 18+)

Завдяки Fiber React тепер підтримує **конкурентний рендеринг**:

- можна рендерити частини UI "у фоні" (background rendering);
- користувач не бачить "зависань";
- життєві цикли викликаються **тільки коли зміни зафіксовані** (commit).

---

## Підсумок

> **Fiber Architecture** - це механізм, який зробив React "розумним":
> він керує **часом, пріоритетом і порядком виконання життєвих циклів**.

| Фаза | Що робить | Методи |
| --- | --- | --- |
| Render phase | Обчислює зміни (може бути призупинена) | `render`, `shouldComponentUpdate`, тіло функціонального компонента |
| Commit phase | Застосовує зміни (завжди синхронна) | `componentDidMount`, `componentDidUpdate`, `useEffect`, `cleanup` |

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

Для рев’юера

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

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