*`id`: A string identifying the part of the UI you are measuring.
36
-
*`onRender`: An [`onRender`callback](#onrender-callback) that React calls every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
*Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
*`id`: The string `id` prop of the `<Profiler>`tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
57
-
*`phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
58
-
*`actualDuration`: The number of milliseconds spent rendering the `<Profiler>`and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo)and[`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
59
-
*`baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>`subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration`against it to see if memoization is working.
60
-
*`startTime`: A numeric timestamp for when React began rendering the current update.
61
-
*`endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
@@ -77,25 +77,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
77
77
</App>
78
78
```
79
79
80
-
It requires two props: an `id` (string) and an `onRender`callback (function) which React calls any time a component within the tree "commits" an update.
Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
`<Profiler>`lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension.
0 commit comments