Fiberとは何か？

🎯 結論から言う

📜 なぜStack Reconcilerではダメだったのか？

React 15以前はStack Reconcilerというアーキテクチャを使っていました。 これはJavaScriptのコールスタックを使ってコンポーネントを再帰的に処理するものでした。

// Stack Reconcilerのイメージ（再帰で全部処理）
function reconcile(component) {
  // 1つ処理したら...
  const children = component.render();
  
  for (const child of children) {
    reconcile(child); // 再帰！中断できない
  }
}

🧵 Fiberが解決したこと

Fiberは再帰をループに変えることで、処理を任意の時点で中断・再開できるようにしました。 各コンポーネントに対応するFiberオブジェクトを連結リスト（リンクトリスト）として管理します。

interface Fiber {
  // コンポーネントの種類
  type: string | Function;
  
  // propsとstate
  pendingProps: Props;
  memoizedState: State;
  
  // ツリー構造（連結リスト）
  child: Fiber | null;      // 最初の子
  sibling: Fiber | null;    // 次の兄弟
  return: Fiber | null;     // 親
  
  // 変更フラグ
  flags: Flags;             // 更新・挿入・削除
  
  // ダブルバッファリング
  alternate: Fiber | null;  // 前回のFiber
}

// Fiberのイメージ（ループで処理 → 中断可能）
function workLoop(deadline) {
  while (nextUnitOfWork && deadline.timeRemaining() > 0) {
    // 1つのFiberを処理
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
  
  if (nextUnitOfWork) {
    // 時間切れ → ブラウザに制御を返す（次フレームに再開）
    requestIdleCallback(workLoop);
  } else {
    // 全Fiber処理完了 → commit phase
    commitRoot();
  }
}

requestIdleCallback（実際はReact独自のスケジューラー）で ブラウザが余裕のある時間帯（アイドル時間）に作業を小刻みに処理します。 ユーザー入力が来たら即座にそちらを優先できます。

🌳 ダブルバッファリング

Reactは常に2つのFiberツリーを保持します——current tree（現在の画面）と work-in-progress tree（作業中の新しいツリー）です。

この設計により、レンダリング中（render phase）にユーザーが見ているUIは変わりません。 ブラウザへの反映はcommit phaseで一瞬で行われます。

🚀 FiberがConcurrent Modeを可能にした

Fiberアーキテクチャによって、Reactは優先度に基づいた処理スケジューリングを実現しました。