11. React DevTools Profiler: Flamegraphs, Ranked Charts & Re-render Auditing • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

React DevTools Profiler browser extension ka ek powerful tab hai jo React application ke har render commit ko record karke batata hai:
*   Kaunsa component render hua aur kitna time (milliseconds) liya.
*   **"Why did this component render?"** (Props change, Hook change, ya Parent render).

---

### 2. Flamegraph vs Ranked Chart View

1. **Flamegraph Chart:**
   *   Component Tree hierarchy dikhata hai.
   *   **Grey Bars:** Jo components render nahi huye (Cached / Memoized).
   *   **Yellow/Orange Bars:** Jo components render huye aur jinhone zyada CPU execution time liya (Bottlenecks!).
2. **Ranked Chart:**
   *   Saare rendered components ko unke **Execution Time ke descending order** me sort karke dikhata hai (Top slowest component sabse upar).

---

### 3. Profiling in Production Code (`<Profiler>` Component)

React me programmatically performance metrics capture karna:

```jsx
import React, { Profiler } from "react";

function onRenderCallback(
    id, phase, actualDuration, baseDuration, startTime, commitTime
) {
    if (actualDuration > 16) { // > 16ms drops below 60 FPS!
        console.warn(`⚠️ Slow render detected in ${id}: ${actualDuration.toFixed(2)}ms`);
    }
}

function App() {
    return (
        <Profiler id="FeedList" onRender={onRenderCallback}>
            <UserFeed />
        </Profiler>
    );
}
```

---

### 4. Auditing Wasted Re-renders with `why-did-you-render`

```javascript
// wdyr.js (Dev environment only)
import React from "react";
if (process.env.NODE_ENV === "development") {
    const whyDidYouRender = require("@welldone-software/why-did-you-render");
    whyDidYouRender(React, {
        trackAllPureComponents: true
    });
}
```
Jab bhi koi component bina props/state me actual value change ke re-render hoga, console me exact diff highlight ho jayega!

---

### 5. Master Comparison Matrix

---

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

1. **`actualDuration` aur `baseDuration` me kya fark hai?** -> `actualDuration` us specific render cycle ka actual execution time hai (with memoization benefits); `baseDuration` worst-case render time estimate karta hai agar koi memoization na ho.
2. **Profiler me "Why did this render?" badge activate kaise karte hain?** -> React DevTools settings me jakar *"Record why each component rendered while profiling"* checkbox enable karna padta hai.
3. **Production build me `<Profiler>` chalane ke liye kya zaroori hota hai?** -> Webpack/Vite build config me React ko `react-dom/profiling` alias par map karna padta hai.

---
**Next Topic:** 12. React Fiber Architecture: Render Phase (Interruptible) vs Commit Phase (Synchronous)

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