Що робить Fiber Architecture в контексті життєвого циклу?

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

Що таке 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 це реалізує:

Render Phase (реконсиляція) Fiber проходить по дереву Fiber-вузлів і обчислює, які зміни потрібні.

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

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`

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

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

Premium

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