Bug: onRender of parent <Profiler> called for each child update

With Profiler API it’s not possible (or at least not clear) how to measure commit time for parent components which renders child which is also should be profiled.

Example from the documentation:

Profiler components can also be nested to measure different components within the same subtree:


  <App>
    <Profiler id="Panel" onRender={callback}>
      <Panel {...props}>
        <Profiler id="Content" onRender={callback}>
          <Content {...props} />
        </Profiler>
        <Profiler id="PreviewPane" onRender={callback}>
          <PreviewPane {...props} />
        </Profiler>
      </Panel>
    </Profiler>
  </App>

In this case, we can’t measure separately updates only for Panel component as the same callback will be called for updates in Content or PreviewPane.

React version: 16.9.0

I prepared a simplified demo: https://codesandbox.io/s/react-codesandbox-9zf7v

As you can see here wrapper profiler updated every time with counter profiler even though that wrapper component is not updated.

[bvaughn]

The behavior you have described how the API was intentionally designed. Profiler reports times for any/ever update within its subtree. (This enables you to provide an entire application, while also collecting times for certain subtrees.)

If you’re interested in the Profiler API’s design, you can find the RFC here: https://github.com/reactjs/rfcs/blob/master/text/0051-profiler.md

[bvaughn]

Right. I understood what you were asking for. That’s just not how the Profiler API was designed to work. 😄

Implicit in my previous comment was that you would need to subtract subtree durations from a Profiler to determine the duration only for the single component in between, but again- we don’t recommend using the API that way.