1. Why does React have to have Fiber?(motivation)

1️⃣ Problems with old React (Stack Reconciler)

Before React 16, React’s update process was:

setState
 → 同步递归 diff
 → 一口气算完整棵树
 → 更新 DOM

❌ Nature of the problem

• Uninterruptible
• Cannot be paused
• Non-recoverable

If the component tree is large:

• diff occupies the JS main thread
• User scrolling/input will freeze
• The browser can't intervene

👉 This is completely different from the Vue effect model Vue is "point update", React is "tree update", React must solve this problem.

2️⃣ Choice of React

React did not adopt Vue's "more fine-grained responsiveness", but chose:

• Make "render itself" interruptible, split, and retry

👉 Fiber is designed for this purpose.

2. What is Fiber (one sentence version)

• Fiber is an "interruptable virtual call stack + data structure"

To be more straightforward:

• Fiber = rewrite recursive diff into "pausable cyclic task"

3. The essence of Fiber: turning "tree" into "linked list + stack"

1️⃣ What is a Fiber node?

Each Fiber node = one component / DOM node

interface Fiber {
  type           // 组件类型
  key
  stateNode      // DOM 或 class 实例
  return         // 父 fiber
  child          // 第一个子 fiber
  sibling        // 下一个兄弟 fiber

  pendingProps
  memoizedProps
  memoizedState  // hooks 就在这

  flags          // 副作用标记
}

⚠️ NOTE: Fiber is not Virtual DOM Virtual DOM is describing UI Fiber is Scheduling + Execution Unit

2️⃣ Why child / sibling / return?

Because this works:

• No need for recursion
• Use while loop
• You can pause every step

App
 └─ A
    ├─ B
    └─ C

becomes:

App.child → A
A.child → B
B.sibling → C

4. Fiber’s core capabilities: interruptible render

1️⃣ render phase (interruptible)

React breaks updates into two steps:

Render 阶段（可中断）
Commit 阶段（不可中断）

What does the Render phase do?

• Execution component function
• Call Hooks
• diff Fiber
• Flags (add/delete/modify)

👉 Does not operate DOM

2️⃣ Commit stage (must be completed at one time)

• Manipulating the DOM
• Execute useEffect cleanup / create
• ref assignment

👉 Once entered, never interrupt

3️⃣ How is interrupt implemented?

while (nextUnitOfWork && !shouldYield()) {
  nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
}

• shouldYield(): The browser wants control
• Save current fiber
• Continue from here next time

👉 Fiber = Recoverable execution context

5. The relationship between Fiber and Scheduler (concurrency source)

1️⃣ Scheduler decides “when to run”

• requestIdleCallback (early)
• MessageChannel
• Priority (lane)

高优先级（点击）
低优先级（列表）

2️⃣ Fiber decides “where to stop”

• Each Fiber = one work unit
• Can be paused
• Disposable
• Redoable

👉 Concurrency = Scheduler + Fiber

6. Why can Fiber "re-run render" without being afraid?

This is the core design premise of React:

• render must be a pure function

同样的 props + state
 → 同样的 UI

So:

• render is discarded after running half way ❌ It doesn’t matter
• Run again ✅ Same result

👉 This is difficult to achieve with Vue effect

7. Fiber vs Vue effect (the comparison you care about most)

Dimensions	Vue3 effect	React Fiber
Granularity	Attribute level	Component level
Update method	Accurate trigger	render rerun
Interruption capability	❌	✅
Scheduling Friendly	Average	Extremely Strong
Concurrency basics	scheduler + job	scheduler + fiber

Summary in one sentence:

• Vue uses "fine-grained dependencies" to avoid calculations
• React uses "interruptible calculation" to calculate hard

8. Why do Hooks have to rely on Fiber?

Because:

• Hooks state exists fiber.memoizedState
• render is taken in order when re-running
• Fiber ensures that Hook chains of the same component are stable

Fiber
 └─ memoizedState
     ├─ hook1
     ├─ hook2
     └─ hook3

👉 No Fiber, no Hooks

9. Clarification of common misunderstandings (high-frequency interviews)

❌ Fiber = Concurrency

• Fiber is infrastructure, not equal to concurrency

❌ Fiber = faster

• Fiber is sometimes slower, but more "controllable"

✅ Fiber = schedulable, interruptible, and resumable

10. The ultimate one-sentence summary

• Fiber is not for performance, but for "enabling React to be scheduled like the operating system"