Що робить Fiber-архітектура в React?

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

---

#До Fiber (React < 16)

Рендеринг React раніше був синхронним і "блокувальним":

• При зміні стану React рекурсивно проходив усе дерево компонентів.
• Якщо дерево велике - React не міг перерватися.
• У підсумку браузер "завмирав", поки React не закінчить роботу.

Проблема: якщо користувач друкує, скролить або рухає мишею, а React "зайнятий" великим ререндером - інтерфейс підвисає.

---

#Що таке Fiber

Fiber - це переписана реалізація Virtual DOM, де кожен компонент представлений як окремий вузол (Fiber node) зі своєю "міні-задачею".

Можна сказати, що Fiber = "одиниця роботи React".

Тепер React:

• розбиває велике оновлення на дрібні частини (fibers),
• виконує їх по черзі,
• і може призупиняти, поновлювати або скасовувати їх залежно від пріоритету.

---

#Основні цілі Fiber

---

#Як це працює покроково

1. Зміна стану (setState, useState) → React ставить оновлення в чергу.
2. React починає Render Phase (фазу підготовки):

• Створює "fiber-вузли" для кожного компонента.
• Обчислює, які частини потрібно оновити.
• Може призупинятися, якщо в браузері є важливіші задачі.

3. Коли все готово → Commit Phase (фаза застосування):

• React одним пакетом застосовує зміни до DOM.

---

#Fiber у дії (приклад)

Припустимо, у тебе 1000 карток, і React має їх перемалювати.

• Раніше (до Fiber): React відрисовував усі 1000 підряд. UI "завмирав" на 200-300 мс.

• Тепер (з Fiber): React може сказати:

  "Я перемалюю 200 карток, потім дам браузеру подихати, обробаю скрол, потім продовжу з рештою 800."

Це створює відчуття плавності і відсутності "лагів".

---

#Структура Fiber-вузла

Кожен "fiber" зберігає інформацію про компонент:

Це дозволяє робити оновлення на рівні вузлів, а не всього дерева.

---

#Fiber і фази рендерингу

React тепер чітко розділяє:

1. Render phase (підготовка):

• React будує нове дерево fiber-вузлів.
• Може бути перервана і поновлена.

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

• React застосовує зміни до DOM.
• Не може бути перервана.

---

#Пріоритети задач (Scheduler)

Fiber використовує планувальник (Scheduler), який вирішує, що оновити в першу чергу:

React може тимчасово відкласти низькопріоритетні задачі, щоб спочатку обробити критичні (ввід, скрол тощо).

---

#Fiber став основою для:

Concurrent Rendering - React може рендерити кілька версій UI одночасно (наприклад, "нову" і "стару").

Suspense - React може "призупинити" компонент, поки не завантажаться дані.

Transitions (useTransition) - Дозволяє оновленням бути "м'якими" (без мерехтіння).

---

#Підсумок