React DevTools & Profiler
React DevTools, EK, BROWSER, EXTENSION, hai — COMPONENT, TREE, KO, INSPECT, KARNE, DETA, hai (PROPS, STATE, HOOKS, DEKHNA), aur, DIRECTLY, BROWSER, MEIN, STATE, EDIT, KARKE, TEST, KARNE, DETA, hai.
Profiler TAB, RECORDING, KARTA, hai, ki, KAUN, SE, COMPONENTS, RE-RENDER, HUE, aur, KITNA, TIME, LAGA — "WHY, DID, THIS, RENDER" JAISE, QUESTIONS, KA, JAWAAB, DETA, hai, PERFORMANCE, BOTTLENECKS, IDENTIFY, KARNE, KE, LIYE.
// Profiler API, CODE mein, bhi, USE, ho, sakta hai:
import { Profiler } from "react";
function onRenderCallback(id, phase, actualDuration) {
console.log(id, phase, actualDuration + "ms");
}
<Profiler id="ProductList" onRender={onRenderCallback}>
<ProductList />
</Profiler>- React DevTools = component tree, INSPECT (props, state, hooks) karne ke liye
- Profiler = RE-RENDERS, ka, TIME, aur, FREQUENCY, MEASURE karta hai
- Performance, bottlenecks, IDENTIFY, karne, ka, PRIMARY, TOOL
Profiler, KA, "FLAME, GRAPH" VIEW, HAR, COMPONENT, KO, EK, BAR, KI, TARAH, DIKHATA, hai — WIDER, BAR, MATLAB, ZYAADA, TIME, LAGA, RENDER, HONE, MEIN. YELLOW/RED, COLORS, SLOW, COMPONENTS, HIGHLIGHT, KARTE, HAIN.
why-did-you-render, EK, THIRD-PARTY, LIBRARY, hai, JO, CONSOLE, MEIN, EXACTLY, BATATA, hai, KIS, PROP/STATE, CHANGE, KI, WAJAH, SE, EK, COMPONENT, RE-RENDER, HUA — Profiler, SE, ZYAADA, GRANULAR, DEBUGGING, INFORMATION.
- React DevTools Profiler = VISUAL, timing, information
- why-did-you-render = EXACT, "KYUN" re-render, hua, EXPLANATION