What is the React Profiler API?
Why Interviewers Ask This
Mid-level React.js roles require deep understanding of this topic. Interviewers ask this to separate candidates who truly understand the mechanics from those who only know surface-level concepts.
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.
Common Mistake
Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your React.js experience.
Previous
What are React Portals use cases?
Next
What is the difference between client-side routing and server-side routing?