14. Double Buffering in Fiber (current tree vs workInProgress tree) • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

Video game engines (Unreal Engine, Unity) screen par direct draw nahi karte — wo **Frame Buffer A** ko monitor par display karte hain jabki background RAM me **Frame Buffer B** draw ho raha hota hai. Jab Frame B ready hota hai, toh pointer turant switch kar dete hain (Zero Screen Tearing!).

**React Fiber exact same Double Buffering technique use karta hai!**

```
[ Current Fiber Tree ]  <=========== (alternate) ===========>  [ WorkInProgress (WIP) Tree ]
  (Currently on Screen)                                          (Being Prepared in Memory)
```

---

### 2. The `alternate` Pointer & Zero Garbage Collection Churn

Har Fiber node ke paas ek **`alternate`** pointer hota hai:
*   `currentFiber.alternate === workInProgressFiber`
*   `workInProgressFiber.alternate === currentFiber`

**Massive Performance Benefit:**
> React har render par lakho naye Fiber objects allocate nahi karta! Purane Fiber nodes ko `alternate` ke zariye **Reuse (Recycle)** kiya jata hai, jisse JavaScript Engine Garbage Collector (GC) free rehta hai!

---

### 3. The Lifecycle of a Double-Buffered Render:

1. **Initial Mount:** React `current` fiber tree banata hai jo screen par render hoti hai.
2. **State Update:** React `current.alternate` se `workInProgress` tree instantiate karta hai.
3. **Reconciliation (Render Phase):** Saare diffs aur new calculations `workInProgress` tree par background me hote hain.
4. **Commit Phase Pointer Swap:**
   ```javascript
   // The 1-line pointer swap:
   root.current = workInProgress;
   ```
   Ab purani `current` tree next render ke liye background buffer ban jaati hai!

---

### 4. Double Buffering Diagram

```
                 ReactRootInstance
                         │
                         ▼
        ┌─────────────────────────────────┐
        │       FiberRootNode             │
        │       current ─────────────┐   │
        └────────────────────────────┼────┘
                                     │
                 ┌───────────────────┘
                 ▼
     ┌───────────────────────┐             ┌───────────────────────┐
     │  Current Fiber Tree   │◄──alternate─┤ WorkInProgress Tree   │
     │  (Visible on Screen)  │──alternate─►│ (Offscreen Rendering) │
     └───────────────────────┘             └───────────────────────┘
```

---

### 5. Master Comparison Matrix

---

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

1. **Double buffering se user experience me kya fayda hota hai?** -> User ko kabhi bhi aadhi rendered ya flashing/broken UI nahi dikhti; poori component tree memory me 100% complete hone ke baad atomic 1-frame switch me render hoti hai.
2. **Agar render phase beech me abort ho jaye toh double buffering kaise help karti hai?** -> WorkInProgress tree ko bina kisi side-effect ke discard kar diya jata hai kyunki screen par purani `current` tree undisturbed chal rahi hoti hai.
3. **Fiber node ka `stateNode` property dono trees me kya share karta hai?** -> Dono alternate fiber nodes same underlying Real DOM element instance ko point karte hain.

---
**Next Topic:** 15. Concurrent Mode: Time Slicing, Priority Lanes & Scheduler Internals

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