ReactJs Performance Strategy Profiler

You can measure the performance of the app by wrapping the component tree with <Profiler>.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Props

• id: The string that identifies which part of the UI is measured.
• onRender: The callback that receives information about what is rendered and how much time is taken.

onRender callback

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

params
id: The id property of the <Profiler> corresponding to the tree that was just committed. If you are using multiple profilers, this allows you to identify which tree was committed.

phase: “mount”, ‘update’, or “nested-update”. This indicates whether the tree was mounted for the first time or re-rendered due to changes in props, state, or hooks.

actualDuration: The number of milliseconds the and its child elements spent rendering for the current update. This indicates how effectively the subtree is utilizing memoization (e.g., memo and useMemo). Ideally, this value should decrease significantly after the initial mount as more child elements are rendered only when their props change.

baseDuration: An estimate in milliseconds of the time it would take to re-render the entire subtree without optimizations. It is calculated by summing the time taken for the last render of each component in the tree. This value estimates the worst-case rendering cost of the tree (e.g., during initial mount or when memoization is not used). To verify whether memoization is working, compare this value with actualDuration.

startTime: The timestamp of when React began rendering the current update.

commitTime: The timestamp of when React committed the current update. Since this value is shared across all profilers within a single commit, it can be used for grouping as needed.

Pitfall
Because profiling introduces additional overhead, it is disabled by default in production builds. To perform profiling in a production environment, you must explicitly use a special production build with profiling enabled.

Note
You can use the element to collect measurement results programmatically. If you prefer an interactive profiler, try the Profiler tab in React Developer Tools. It provides similar functionality as a browser extension.