Що таке «Fiber architecture»?

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

Fiber architecture - це внутрішній механізм React (введений у React 16), який керує процесом рендерингу компонентів.

Він дозволяє React:

• розбивати оновлення на частини,
• призупиняти та відновлювати рендер,
• надавати пріоритет важливішим завданням,
• і робити інтерфейс чутливим навіть за важких обчислень.

---

#Чому це знадобилося

До React 16 React використовував стекову рекурсивну архітектуру:

• Коли потрібно було оновити дерево компонентів, React проходив усе дерево цілком, рекурсивно.
• Якщо компонент був важким або дерево великим, браузер «завмирав» на частку секунди.

Це означало фризи, втрату FPS, «зависаючий» UI.

---

#Проблема «старого React»

Уяви:

• У тебе є складний застосунок із сотнями компонентів;
• Користувач вводить щось у input;
• React починає перерахунок усього дерева компонентів;
• Поки він не закінчить, нічого іншого в браузері не може відбутися (включно з кліками та анімаціями).

Це було синхронно й непереривано.

---

#Що робить Fiber

React Fiber вирішує цю проблему, перетворюючи процес рендерингу на кооперативний та асинхронний. Тепер React може:

1. Розбивати оновлення на дрібні частини (units of work);
2. Виконувати їх покроково;
3. Зупинятися й продовжувати, якщо браузеру потрібно зробити щось важливіше (наприклад, обробити користувацький ввід);
4. Призначати пріоритети завданням.

Тобто Fiber - це механізм «запланованого» рендера.

---

#Що таке «Fiber» буквально

«Fiber» - це об'єкт, що представляє одиницю роботи (один вузол дерева компонентів).

Кожен компонент React усередині тепер представлений як Fiber-вузол, у якому React зберігає:

• посилання на тип компонента (function, class, HostComponent тощо);
• його props, state, ref, return, sibling, child;
• пріоритет оновлення (термінове / нетермінове);
• і інформацію про те, чи була в нього помилка або ефект.

По суті це нова структура даних, що описує дерево рендера.

---

#Як працює Fiber (покроково)

1. React отримує сигнал, що потрібно оновити UI (наприклад, змінився state).
2. React створює нове «дерево Fiber», копіюючи старе й оновлюючи змінені частини.
3. Це дерево обробляється у два етапи:

---

#1. Render phase (фаза обчислення)

• React рекурсивно створює нове дерево Fiber;
• обчислює, що змінилося;
• може призупиняти або переривати цей процес;
• результат - «список змін», які потрібно внести в DOM.

Ця фаза може бути перервана та відновлена (асинхронна).

---

#2. Commit phase (фаза застосування)

• React застосовує зміни до реального DOM;
• викликає useEffect, componentDidMount, componentDidUpdate тощо.

Ця фаза завжди синхронна й непереривана (щоб уникнути «рваних» UI-станів).

---

#Переваги Fiber Architecture

---

#Fiber і Concurrent Rendering

Завдяки Fiber React 18 отримав Concurrent Rendering - спосіб рендерити частини інтерфейсу асинхронно та з пріоритетами.

Приклади:

• startTransition() - відкладає неважливі оновлення;
• useDeferredValue() - дозволяє UI не «стрибати» під час швидкого вводу;
• Suspense - відкладений рендер із «заглушками».

Усе це стало можливим лише завдяки Fiber.

---

#Візуальна аналогія

Уяви React як художника:

• До Fiber: художник малює всю картину цілком, не піднімаючи голови, поки не закінчить. Навіть якщо ти кличеш його, він не реагує.
• З Fiber: художник малює частинами, може зупинитися, щоб відповісти на запитання або зробити каву, а потім продовжує з того місця, де зупинився.

---

#Підсумок

---

Підсумкове визначення:

React Fiber - це нова реалізація ядра React, яка робить рендеринг покроковим, пріоритетним і перериваним, забезпечуючи плавний, чутливий інтерфейс навіть за великих оновлень.