09. React.memo, Custom Comparison Functions & Object Reference Equality • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

By default, jab Parent component re-render hota hai, toh uske **saare Children bhi re-render hote hain** — chahe unke props bilkul change na huye hon!

`React.memo` ek **Higher-Order Component (HOC)** hai jo child component ko wrap karta hai aur kehta hai:  
*"Agar mere incoming props shallow compare me same hain, toh mujhe re-render MAT karo — purana cached Virtual DOM reuse karo!"*

```jsx
const ExpensiveChart = React.memo(function ExpensiveChart({ data }) {
    console.log("Expensive rendering...");
    return <canvas>{/* Complex Chart Painting */}</canvas>;
});
```

---

### 2. Shallow Comparison (`Object.is`) & The Reference Trap

`React.memo` default me **Shallow Equality** check karta hai:

```javascript
// Props comparison:
prevProps.data === nextProps.data // Object reference comparison!
```
Agar parent me `data={[1, 2, 3]}` inline likha hai, toh har render par naya array reference banega aur `React.memo` bypass ho jayega!

---

### 3. Custom Comparison Function (`arePropsEqual`)

Jab props me deep complex objects hon aur hume custom diffing rule lagana ho:

```jsx
interface ItemProps {
    item: { id: string; title: string; price: number; lastModified: string };
    onBuy: (id: string) => void;
}

function arePropsEqual(prev: ItemProps, next: ItemProps): boolean {
    // Return true agar component ko re-render NAHI karna hai
    return prev.item.id === next.item.id && 
           prev.item.price === next.item.price && 
           prev.onBuy === next.onBuy;
}

export const ProductItem = React.memo(function ProductItem({ item, onBuy }: ItemProps) {
    return <div onClick={() => onBuy(item.id)}>{item.title} - ${item.price}</div>;
}, arePropsEqual);
```

---

### 4. Zero-Cost Alternative: Component Composition (Lift Content Up)

Har jagah `React.memo` lagane se behtar hai component architecture theek karna:

```jsx
// Solution: Pass expensive component as {children} prop!
function ScrollWrapper({ children }) {
    const [scrollPos, setScrollPos] = useState(0);
    return <div onScroll={e => setScrollPos(e.target.scrollTop)}>{children}</div>;
}

// Parent:
<ScrollWrapper>
    <ExpensiveTree /> {/* Scroll state change par ExpensiveTree re-render NAHI hoga! */}
</ScrollWrapper>
```

---

### 5. Master Comparison Matrix

---

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

1. **`React.memo` me custom comparator `arePropsEqual(prev, next)` me `true` return karne ka kya matlab hai?** -> `true` return karne ka matlab props equal hain aur component ko re-render **NAHI** karna hai (Class component ke `shouldComponentUpdate` ka exact opposite).
2. **`React.memo` component ke internal `useState` change hone par re-render ko rok sakta hai kya?** -> Bilkul nahi! `React.memo` sirf external props change ko intercept karta hai; component ki internal state change hone par wo hamesha re-render hoga.
3. **Children composition pattern me children re-render kyu nahi hote jab wrapper component ki state change hoti hai?** -> Kyunki `children` element wrapper ke parent dwara create hokar pass hota hai, isliye wrapper ki local state change hone par children ka element reference identical rehta hai.

---
**Next Topic:** 10. Custom Hooks Architecture: Reusable Business Logic & Headless Component Design

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