12. React Fiber Architecture: Render Phase (Interruptible) vs Commit Phase (Synchronous) • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

React 15 ka purana architecture **Stack Reconciler** use karta tha:
*   Jab state update hoti thi, React recursive function call karta tha poor VDOM tree par.
*   JavaScript single-threaded hai — agar tree me 10,000 elements hon, toh recursion **Main Thread ko 100ms+ tak block kar deta tha!**
*   Natija: Typing lag, dropped frames, aur animation freeze (Jank).

**React 16 me Fiber Reconciler ne poora architecture badal diya!**

---

### 2. Fiber Architecture: Cooperative Multitasking (Time Slicing ⏱️)

Fiber ka main concept hai: **"Virtual Call Stack via Linked List!"**  
React bade render task ko chhote-chhote **Fiber Units of Work** me baant deta hai:

1. React browser se 5ms ka frame budget mangta hai (`requestIdleCallback` / `MessageChannel`).
2. React 1-2 Fiber nodes reconcile karta hai.
3. React check karta hai: *"Browser ke paas user input ya animation pending hai kya?"*
4. Agar haan, toh React **Render Phase ko pause (yield) kar deta hai** aur main thread browser ko saup deta hai!

---

### 3. The 2 Internal Work Loops: `beginWork` & `completeWork`

```
                     workLoopConcurrent()
                              ⬇
             ┌───────────────────────────────────┐
             │   performUnitOfWork(fiber)        │
             └───────────────────────────────────┘
                    /                     \
                   ⬇                       ⬇
        [ beginWork(fiber) ]      [ completeWork(fiber) ]
        - Executes component fn   - Creates actual DOM node
        - Diffing with old fiber  - Bubbles up Effect flags
        - Returns first child     - Moves to sibling/parent
```

---

### 4. Render Phase (Async) vs Commit Phase (Sync)

*   **Render Phase (Interruptible):** React `beginWork` aur `completeWork` chala kar WorkInProgress Fiber tree banata hai. Is phase me koi DOM mutation nahi hoti, isliye isse kitni bhi baar pause, discard ya restart kiya ja sakta hai.
*   **Commit Phase (Synchronous):** React DOM mutations (`appendChild`, `removeChild`) karta hai aur layout effects execute karta hai. Ye phase kabhi interrupt nahi ho sakta taaki user ko half-rendered UI na dikhe.

---

### 5. Master Comparison Matrix

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **Fiber tree linked list recursive function calls se superior kyu hai?** -> Linked list pointers (`fiber.child`, `fiber.sibling`, `fiber.return`) ko hum global `workInProgress` variable me store karke execution loop ko kisi bhi iteration par pause aur resume kar sakte hain.
2. **Render Phase me side effects (jaise API calls ya DOM mutations) kyu nahi karne chahiye?** -> Kyunki Concurrent React high-priority update aane par Render Phase ko discard karke dobara shuru se execute kar sakta hai, jisse side effects duplicate execute ho jayenge.
3. **`completeWork` phase me kya construct hota hai?** -> Real DOM instance (`stateNode`), DOM event listeners aur children DOM nodes ka complete sub-tree assemble hota hai.

---
**Next Topic:** 13. Reconciliation Algorithm & Diffing Rules (Keys, Component Types, Subtree Replacement)

Loading lesson content...

React JSX

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track