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.
Previous
What are React Portals use cases?
Next
What is the difference between client-side routing and server-side routing?