🌲 コンポーネントツリーとは何か？

// ダブルバッファリングのイメージ

// 初期状態（マウント後）
current:  Fiber(App) ←── FiberRoot.current
              alternate ──→ null（まだWIPなし）

// 更新開始
current:  Fiber(App) {memoizedState: 0}
              alternate ──→ WIP Fiber(App) {pendingProps: ...}
wip:      Fiber(App) ←── 構築中

// commit phase後（swap）
current:  旧WIP Fiber(App) ←── FiberRoot.currentが切り替わる
              alternate ──→ 旧current（次回のWIPとして再利用）

// → alternate を使い回すことでGCの負荷を減らしている

// ReactのworkLoop（簡略化）
function performUnitOfWork(unitOfWork: Fiber): Fiber | null {
  // 1. このFiberの処理（beginWork）
  //    コンポーネント関数を呼び出し、子のFiberを生成
  const next = beginWork(current, unitOfWork, renderLanes);

  unitOfWork.memoizedProps = unitOfWork.pendingProps;

  if (next === null) {
    // 子がない（リーフノード）→ completeWorkで後処理
    // その後siblingに移動、なければ親（return）に戻る
    completeUnitOfWork(unitOfWork);
  } else {
    // 子がある → 子に進む（深さ優先）
    workInProgress = next;
  }
}

// 走査の優先順位
// 1. childがあれば child へ（深く進む）
// 2. childがなければ sibling へ（横に進む）
// 3. siblingもなければ return へ（上に戻る）
// 4. rootまで戻ったら終了

// stateを上位コンポーネントに置いてしまうパターン
function App() {
  // このstateが変わると App 以下全コンポーネントが再レンダリング
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input value={inputValue} onChange={e => setInputValue(e.target.value)} />
      <HeavyVisualization data={data} />  {/* 毎回再レンダリング */}
      <DataTable rows={rows} />           {/* 毎回再レンダリング */}
      <Sidebar config={config} />         {/* 毎回再レンダリング */}
    </div>
  );
}

// ✅ stateを使うコンポーネントに近いところに置く
function SearchInput() {
  // このstateが変わっても SearchInput コンポーネントだけが再レンダリング
  const [inputValue, setInputValue] = useState('');
  return (
    <input value={inputValue} onChange={e => setInputValue(e.target.value)} />
  );
}

function App() {
  // App 自体はstateを持たない → 再レンダリングされない
  return (
    <div>
      <SearchInput />           {/* 独立して再レンダリング */}
      <HeavyVisualization />    {/* 変化なし */}
      <DataTable />             {/* 変化なし */}
      <Sidebar />               {/* 変化なし */}
    </div>
  );
}

同じUIを実現するにも、コンポーネントツリーのどこにstateを置くかで、 再レンダリングの伝播範囲がまったく変わります。 State Colocation（状態の局所化）はFiberツリーを理解した上で実践する最も効果的な最適化です。