Debugging React applications with the Profiler API
If you are benchmarking a React application’s performance, then tracking how many times your components are re-rendered and the cost of each re-rendering will help you identify the defecting areas or parts in the application. React provides two different ways to measure the application’s rendering performance: the React Profiler API and the React DevTools profiler tab. The React Profiler API is recommended considering that it supports the Suspense feature.
How do you measure rendering performance?
React provides the Profiler API to measure the rendering performance of a component tree programmatically. The component has two props: the id prop, which is used to identify the part of the UI being measured, and the onRender callback, which is called every time the tree updates.
The callback receives arguments such as id, phase, actualDuration, baseDuration, startTime, and commitTime, which are used to log the rendering...
