⚛️ React.js Intermediate

What is the React Profiler API?

Answer

The React Profiler provides programmatic access to render performance data. The <Profiler> component: <Profiler id="Navigation" onRender={callback}><Nav /></Profiler>. The onRender callback receives: id (the Profiler id), phase ("mount" or "update"), actualDuration (time spent rendering this commit), baseDuration (estimated time to render without memoization), startTime, commitTime. Use actualDuration to identify slow components — if it is consistently high, that component or its children are expensive. React DevTools Profiler (browser extension): a visual, interactive version of the Profiler API with flamegraph, ranked chart, and timeline views. Record a session, interact with your app, and DevTools shows which components rendered, why, and how long each took. The "why did this component render?" feature identifies the specific prop or hook that triggered the render. Performance workflow: observe the problem → profile to find the component → understand why → apply memoization/restructuring → verify improvement in the profiler.