Введение и проблематика

Что было до Fiber?

До React 16 использовался Stack Reconciler — синхронный алгоритм, который обновлял дерево компонентов рекурсивно. Главная проблема: если дерево большое, браузер "зависал" на время обновления.

// Типичная ситуация до Fiber:
Пользователь печатает → setState → Рендер 100мс → UI замирает

Решение: Fiber

React 16 представил полностью переписанное ядро — Fiber. Это не просто оптимизация, а фундаментально новая архитектура.

Базовая теория

Определение Fiber

Fiber — это:

1. Архитектура — новый способ организации работы React
2. Структура данных — объект, представляющий единицу работы
3. Реализация reconciliation — алгоритма сравнения деревьев

Fiber-нода

Каждый элемент в React-приложении представлен Fiber-нодой:

interface Fiber {
  // === Идентификация ===
  type: any;                 // 'div', MyComponent, Fragment
  key: string | null;
 
  // === Дерево (linked list) ===
  child: Fiber | null;       // первый ребёнок
  sibling: Fiber | null;     // следующий "брат"
  return: Fiber | null;      // родитель
 
  // === Состояние ===
  pendingProps: any;         // входящие props
  memoizedProps: any;        // props после рендера
  memoizedState: any;        // state после рендера
 
  // === Эффекты ===
  flags: number;             // Placement | Update | Deletion
 
  // === Double buffering ===
  alternate: Fiber | null;   // ссылка на "другую версию"
}

Типы Fiber-нод

Ключевые концепции

1. Единица работы (Unit of Work)

В отличие от рекурсивного обхода, Fiber позволяет обрабатывать по одной ноде за раз:

// Псевдокод работы Fiber
while (есть_работа && есть_время) {
  текущая_нода = выполнить_работу(текущая_нода);
}
 
// Если время вышло — отдаём управление браузеру

2. Связный список вместо стека

// ❌ Stack Reconciler — нельзя прервать
function reconcile(element) {
  processElement(element);
  element.children.forEach(child => {
    reconcile(child); // рекурсия
  });
}

3. Double Buffering (два дерева)

React хранит два Fiber-дерева одновременно:

┌─────────────────────────────────────────────────┐
│  Current Tree          Work-in-Progress Tree   │
│  (на экране)           (строится)              │
│                                                 │
│    [App]  ◄──alternate──►  [App]               │
│      │                       │                  │
│   [Header]                [Header]              │
│      │                       │                  │
│  [Content]               [Content'] ← изменён  │
└─────────────────────────────────────────────────┘

После commit деревья меняются местами.

4. Приоритеты обновлений

Как Fiber работает: пошаговый разбор

// React внутри себя делает примерно это:
scheduleUpdateOnFiber(fiber, lane, eventTime);

// Цикл работы
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

// Три подфазы:
// 1. Before mutation — читаем текущее состояние DOM
// 2. Mutation — изменяем DOM
// 3. Layout — вызываем useLayoutEffect, componentDidMount

Что дал Fiber

Возможности, которые появились благодаря Fiber:

1. Suspense — приостановка рендера для загрузки данных
2. Error Boundaries — перехват ошибок в дереве компонентов
3. Concurrent Mode — параллельная работа над несколькими версиями UI
4. Transitions — разделение срочных и несрочных обновлений
5. useTransition / useDeferredValue — хуки для управления приоритетами

Сравнение Stack vs Fiber

Пограничные кейсы

// ❌ Опасно — side effect в render
function Counter({ count }) {
  document.title = `Count: ${count}`; // может вызваться многократно!
  return <div>{count}</div>;
}
 
// ✅ Безопасно — side effect в useEffect
function Counter({ count }) {
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return <div>{count}</div>;
}

Вопросы интервьюера

Q: Чем Fiber отличается от Virtual DOM?

Virtual DOM — это концепция (представление UI в памяти). Fiber — это конкретная реализация работы с этим представлением в React.

Q: Fiber делает React многопоточным?

Нет, JavaScript остаётся однопоточным. Fiber позволяет "разбивать" работу на кусочки и уступать главному потоку между ними.

Q: Когда появился Fiber?

React 16 (сентябрь 2017). Concurrent Mode стал стабильным в React 18 (март 2022).

Q: Можно ли использовать Fiber напрямую?

Нет, Fiber — внутренняя реализация React. Разработчики взаимодействуют с ним через публичные API (hooks, setState и т.д.).

Источники

• React Fiber Architecture — объяснение от Andrew Clark
• Inside Fiber — детальный разбор
• React 16 Release Notes — официальный анонс
• React Conf 2017: Fiber — доклад Lin Clark

Code Example 1: Fiber node structure

❓ Какие основные поля содержит Fiber-нода? Объясните назначение полей child, sibling, return и alternate.

interface Fiber {
  type: any;
  key: string | null;
 
  child: Fiber | null;
  sibling: Fiber | null;
  return: Fiber | null;
 
  pendingProps: any;
  memoizedProps: any;
  memoizedState: any;
 
  flags: number;
 
  alternate: Fiber | null;
}

Code Example 2: Unit of Work

❓ Как Fiber позволяет разбивать работу на части? Что происходит, когда "время вышло"?

while (есть_работа && есть_время) {
  текущая_нода = выполнить_работу(текущая_нода);
}

Code Example 3: Stack vs Fiber traversal

❓ В чём принципиальное отличие между этими двумя подходами к обходу дерева? Почему первый нельзя прервать, а второй можно?

Stack Reconciler:

function reconcile(element) {
  processElement(element);
  element.children.forEach(child => {
    reconcile(child);
  });
}

Fiber:

function performWork(fiber) {
  doWork(fiber);
 
  if (fiber.child) return fiber.child;
  if (fiber.sibling) return fiber.sibling;
  return fiber.return?.sibling;
}

Code Example 4: Work loop

❓ Что делает функция workLoopConcurrent? Что означает условие !shouldYield()?

function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}

Code Example 5: Side effects in render

❓ Какая проблема в первом варианте? Почему side effect в render фазе опасен в контексте Fiber?

Version A:

function Counter({ count }) {
  document.title = `Count: ${count}`;
  return <div>{count}</div>;
}

Version B:

function Counter({ count }) {
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return <div>{count}</div>;
}