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

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

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

// Представьте дерево из 10 000 компонентов
// Stack Reconciler обрабатывал бы их все за один проход
// Браузер не мог бы отрисовать анимацию или обработать клик

Зачем нужен Fiber

Fiber решает эту проблему, разбивая работу на маленькие порции. React может:

• Приостановить работу и вернуться к ней позже
• Назначать приоритеты разным типам обновлений
• Переиспользовать ранее выполненную работу
• Отменять работу, если она больше не нужна

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

Что такое Fiber-нода

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

// Упрощённая структура Fiber-ноды
interface Fiber {
  // Тип компонента
  type: any;
  key: string | null;
 
  // Связи с другими нодами (linked list)
  child: Fiber | null;      // первый ребёнок
  sibling: Fiber | null;    // следующий брат
  return: Fiber | null;     // родитель
 
  // Состояние
  pendingProps: any;        // новые props
  memoizedProps: any;       // props после рендера
  memoizedState: any;       // state после рендера
 
  // Эффекты
  flags: Flags;             // какие операции нужны (Placement, Update, Deletion)
 
  // Для работы планировщика
  lanes: Lanes;             // приоритет обновления
}

Linked List вместо стека

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

Обход происходит так:

1. Спуск к первому ребёнку (child)
2. Если нет детей — переход к брату (sibling)
3. Если нет братьев — возврат к родителю (return)

Две фазы работы

// React обходит дерево и вычисляет различия
function performUnitOfWork(fiber) {
  // 1. Выполнить работу для этой ноды
  beginWork(fiber);
 
  // 2. Если есть ребёнок — вернуть его как следующую работу
  if (fiber.child) {
    return fiber.child;
  }
 
  // 3. Иначе — завершить работу и перейти к брату/родителю
  completeUnitOfWork(fiber);
}

Практический пример работы алгоритма

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}
// Создаются Fiber-ноды: App → div → Header, Content

const [count, setCount] = useState(0);
// setCount(1) создаёт "update" объект и планирует работу

function workLoop(deadline) {
  // Пока есть работа и время
  while (nextUnitOfWork && deadline.timeRemaining() > 0) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
 
  // Если время вышло — уступаем браузеру
  if (nextUnitOfWork) {
    requestIdleCallback(workLoop);
  }
}

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

React разделяет обновления по приоритетам:

Double Buffering

React использует технику "двойной буферизации":

Current Tree          Work-in-Progress Tree
(то, что на экране)   (новая версия)
     ↓                      ↓
  [Fiber]  ←──alternate──→ [Fiber]
     ↓                      ↓
  [Fiber]  ←──alternate──→ [Fiber]

• Current — дерево, которое сейчас отображается
• Work-in-Progress — дерево, которое строится
• После commit они меняются местами

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

// ❌ Неправильно — side effect в render
function Component() {
  console.log('render'); // может вызваться несколько раз
  sendAnalytics();       // опасно!
 
  return <div>...</div>;
}
 
// ✅ Правильно — side effects в useEffect
function Component() {
  useEffect(() => {
    sendAnalytics(); // вызовется один раз после commit
  }, []);
 
  return <div>...</div>;
}

Плюсы и минусы

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

Q: Почему React может вызвать render несколько раз?

В Concurrent Mode React может прервать render phase и начать заново, если пришло более приоритетное обновление. Поэтому render должен быть чистой функцией.

Q: Что такое "time slicing"?

Техника разбиения работы на кусочки по ~5мс, чтобы не блокировать главный поток. Между кусочками браузер может обрабатывать события и рисовать.

Q: Как Fiber связан с Suspense?

Fiber позволяет "приостановить" рендеринг компонента, ожидая данные. Без прерываемости Suspense был бы невозможен.

Q: Все ли обновления прерываемые?

Нет. flushSync() делает обновление синхронным. Также в Legacy Mode все обновления синхронные.

Источники

• React Fiber Architecture — объяснение от разработчика React
• Inside Fiber: in-depth overview — детальный разбор
• React Source Code — исходники reconciler

Code Example 1: Fiber node structure

❓ Что представляет собой Fiber-нода? Для чего нужны свойства child, sibling, return?

interface Fiber {
  type: any;
  key: string | null;
 
  child: Fiber | null;
  sibling: Fiber | null;
  return: Fiber | null;
 
  pendingProps: any;
  memoizedProps: any;
  memoizedState: any;
 
  flags: Flags;
  lanes: Lanes;
}

Code Example 2: Render phase work loop

❓ Как работает функция performUnitOfWork? Почему используется связный список вместо рекурсии?

function performUnitOfWork(fiber) {
  beginWork(fiber);
 
  if (fiber.child) {
    return fiber.child;
  }
 
  completeUnitOfWork(fiber);
}

Code Example 3: Commit phase

❓ Что происходит в каждой из трёх подфаз commit? Почему commit нельзя прервать?

function commitRoot(root) {
  commitBeforeMutationEffects();
 
  commitMutationEffects();
 
  commitLayoutEffects();
}

Code Example 4: Component tree to Fiber

❓ Какое Fiber-дерево создаст React для этого компонента?

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

Code Example 5: Work loop with time slicing

❓ Как workLoop позволяет браузеру обрабатывать другие задачи? Что такое time slicing?

function workLoop(deadline) {
  while (nextUnitOfWork && deadline.timeRemaining() > 0) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
 
  if (nextUnitOfWork) {
    requestIdleCallback(workLoop);
  }
}

Code Example 6: Side effects in render problem

❓ Почему side effects в render — это проблема в Concurrent Mode? Как исправить этот код?

Problem:

function Component() {
  console.log('render');
  sendAnalytics();
 
  return <div>...</div>;
}

Solution:

function Component() {
  useEffect(() => {
    sendAnalytics();
  }, []);
 
  return <div>...</div>;
}