Что такое Fiber в React?

React Fiber — переосмысление алгоритма reconciliation

React Fiber — это полностью переписанный движок (reconciler) React, представленный в версии 16.0 в 2017 году. Он заменил предыдущий алгоритм Stack Reconciler и решил ключевую проблему: невозможность прерывать длинные операции рендеринга.

Проблема старого Stack Reconciler

Старый алгоритм использовал рекурсивный обход дерева компонентов. Это означало, что раз начав обновление, он не мог остановиться до полного завершения. Если дерево было глубоким — приложение "замерзало" на сотни миллисекунд, блокируя главный поток браузера. Пользователь в это время не мог взаимодействовать с интерфейсом.

Что такое Fiber-узел

Fiber — это не просто алгоритм, но и структура данных. Каждый React-компонент имеет соответствующий Fiber-узел — простой JavaScript объект, который хранит:

• Тип компонента (функция, класс, DOM-элемент)
• Текущие props и state
• Ссылки на родительский, дочерний и соседний Fiber-узлы (linked list)
• Информацию о побочных эффектах (вставка, обновление, удаление)
• Приоритет обновления

Эта структура превращает дерево компонентов в связанный список, который можно обходить итеративно, а не рекурсивно.

Ключевые возможности Fiber

1. Прерываемый рендеринг (Interruptible Rendering) Fiber разбивает работу на небольшие единицы — "chunks of work". Между каждой единицей React может проверить: есть ли более приоритетная задача? Если да — отложить текущую работу и выполнить срочную.

2. Приоритизация задач Fiber вводит систему приоритетов. Например, анимация и обработка ввода пользователя имеют высший приоритет, а предзагрузка данных — низкий. Это основа для useTransition, useDeferredValue и Concurrent Mode.

3. Двойная буферизация (Double Buffering) Fiber поддерживает два дерева одновременно:

• current — дерево, которое сейчас отображается на экране
• work-in-progress — дерево, которое строится во время обновления

Когда обновление завершено, React атомарно переключает деревья. Это гарантирует, что пользователь никогда не видит неполный UI.

4. Фазы работы Работа Fiber разделена на две фазы:

• Render/Reconciliation phase — прерываемая, вычисляет что изменилось, не производит побочных эффектов
• Commit phase — синхронная, неделимая, применяет изменения к реальному DOM

Что стало возможным благодаря Fiber

• Concurrent Mode — несколько версий UI могут готовиться одновременно
• Suspense — компоненты могут "ждать" асинхронных данных
• useTransition / startTransition — пометить обновление как некритичное
• Server Components — рендеринг на сервере с потоковой передачей
• Automatic Batching (React 18) — автоматическая группировка setState вызовов

Практический пример

Без Fiber: нажатие кнопки запускает тяжёлый рендер списка из 10 000 элементов → UI замораживается на 500мс → пользователь видит лаг.

С Fiber + useTransition:

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setItems(heavyList); // низкий приоритет
});
// Ввод пользователя остаётся отзывчивым!

Итог

Fiber — это фундаментальный сдвиг в архитектуре React: от синхронного блокирующего рендеринга к асинхронному, прерываемому и приоритизированному. Это внутренняя деталь реализации, но понимание Fiber помогает правильно использовать современные возможности React 18+ и писать по-настоящему отзывчивые приложения.