13. Reconciliation Algorithm & Diffing Rules (Keys, Component Types, Subtree Replacement) • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

Do arbitrary trees ko mathematically compare karne ka standard algorithm **O(n³)** hota hai (1000 elements ke liye 1 Billion operations!).  
React ne 2 practical assumptions (Heuristics) lagaye jisse complexity **O(n)** ho gayi:

1. **Rule 1:** Agar do elements ka **Type alag hai**, toh unki poori subtree destroy karke nayi banayi jayegi.
2. **Rule 2:** List elements ko identify karne ke liye developer stable **`key` prop** provide karega.

---

### 2. Diffing Rule 1: Different Element Types (Subtree Replacement)

```jsx
// Pehla Render:
<div><Counter /></div>

// Agla Render:
<span><Counter /></span>
```
`<div>` se `<span>` badal gaya ➔ React purane `<div>` aur uske andar ke `<Counter>` component ko **unmount (destroy) kar dega**, aur naya `<Counter>` mount karega (State 100% reset!).

---

### 3. Diffing Rule 2: Same Element Type (Attribute Patching)

```jsx
// Pehla Render:
<div className="before" title="stuff" />

// Agla Render:
<div className="after" title="stuff" />
```
DOM node wahi rehta hai, React sirf `className` attribute ko mutate karta hai.

---

### 4. Diffing Rule 3: The Danger of Array Index as `key` 🪤

```jsx
// ❌ DANGEROUS: Using index as key
{items.map((item, index) => (
    <TodoItem key={index} text={item.text} />
))}
```

**Index Key Bug Walkthrough:**
1. List me 3 items hain: `[A(0), B(1), C(2)]`.
2. Tu `A` ko delete karta hai ➔ Nayi list: `[B(0), C(1)]`.
3. React compare karta hai:
   * Key 0 (pehle A tha, ab B hai) ➔ React sochta hai A mutate hua hai, isliye **internal unmanaged input state change nahi hoti!**
   * Key 2 gayab ho gaya ➔ React **C ko delete kar deta hai!**

```jsx
// ✅ SAFE: Use stable unique entity ID
{items.map(item => (
    <TodoItem key={item.id} text={item.text} />
))}
```

---

### 5. Master Comparison Matrix

---

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

1. **Kisi component ki state ko forcibly reset karne ka clean way kya hai?** -> Us component par `key={dynamicId}` prop badal dena; key badalte hi React purana instance destroy karke fresh mount karta hai.
2. **`Math.random()` ko key me pass karne se kya hota hai?** -> Har single render par key change hogi jisse har render par poora DOM recreate hoga, input focus lose ho jayega aur performance destroy ho jayegi.
3. **React Fiber multi-child reconciliation me double pass kyu use karta hai?** -> Pehle pass me matched keys ko fast in-place update karta hai; doosre pass me map lookups ke zariye inserted/moved/deleted nodes handle karta hai.

---
**Next Topic:** 14. Double Buffering in Fiber (current tree vs workInProgress tree)

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