Объект fiber и дерево с двойной буферизацией

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

Что такое fiber на самом деле. Fiber — обычный JavaScript-объект, один на каждый экземпляр компонента, один на каждый DOM-элемент в дереве. Каждый fiber хранит: type компонента, его props, его key, текущее state и хуки, указатели на child, следующий sibling и return (родитель), плюс указатель alternate на двойника в другом дереве. Файберы образуют связное дерево, а не массив — и именно связность является ключевым свойством.

Рекурсивный обход дерева живёт в стеке вызовов и не может быть приостановлен; обход связного списка хранит свою позицию в обычной переменной, так что React может остановиться после любого fiber, сохранить указатель и продолжить с точно того же места позже. Fiber — структура данных, сделавшая прерываемый рендеринг возможным. Название появилось до React 18 — архитектура появилась в React 16 (2017) — но только React 18 включил конкурентные функции, эксплуатирующие её.

Два дерева: current и workInProgress. React всегда держит два fiber-дерева. Дерево current — то, чьё состояние совпадает с тем, что сейчас нарисовано на экране. Когда начинается обновление, React строит дерево workInProgress — клонируя файберы из current по мере прохода, применяя новые props и state. Указатель alternate каждого fiber связывает его с двойником в другом дереве, поэтому клонирование дёшево: неизменившиеся поддеревья переиспользуются по ссылке.

Когда дерево workInProgress завершено и закоммичено, два дерева меняются местами: workInProgress становится current, а старое current хранится, чтобы стать следующим workInProgress. Это двойная буферизация. Она гарантирует, что дерево на экране никогда не наблюдается в полуобновлённом состоянии — и именно поэтому рендер, прерванный и выброшенный, ничего не стоит: выброшенное дерево workInProgress просто никогда не коммитится.

Stack-реконсилер: чем fiber лучше предшественника. До React 16 реконсилер был написан как стек — один большой синхронный обход. Команда React называла его «stack reconciler». Его фатальный изъян: рендер большого приложения мог занимать 60–100 мс, и всё это время главный поток был заблокирован. Нажатия клавиш, анимации, скролл — всё ждало завершения React. Fiber-реконсилер сохраняет прогресс в явном heap-объекте, что позволяет прерваться после любого fiber и уступить браузеру. Это структурное изменение, а не оптимизация: рекурсию нельзя «ускорить» до прерываемости — нужна другая структура данных.