Profiler calling onRender for component updates outside of the Profiler tree

From the Profiler docs:

The Profiler requires an onRender function as a prop. React calls this function any time a component within the profiled tree “commits” an update.

However, given:

import React from 'react'
import ReactDOM from 'react-dom'

function Counter() {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>{count}</button>
}

function App() {
  return (
    <div>
      <React.Profiler
        id="counter"
        onRender={() => console.log('called')}
      >
        <div>
          Profiled counter
          <Counter />
        </div>
      </React.Profiler>
      <div>
        Unprofiled counter
        <Counter />
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

I’m getting a log when I click on the unprofiled counter.

Reproduction: https://codesandbox.io/s/react-codesandbox-tnff6

Am I misunderstanding this API, or is this a bug?

[stonexer]

It seems that the Profiler fiber is always marked as Update in beginWork phase.

[bvaughn]

I don’t think it has anything to do with the element type, but where they are declared relative to where the <Profiler> tags are defined.

It looks like for a subtree that belongs to a single owner- rendering further down in the subtree will cause the Profiler higher up to call onRender.

const Bar = () => (
  <>
    <Profiler id="A">
      <A />
    </Profiler>
    <div>
      <Profiler id="B">
        <B />
      </Profiler>
    </div>
  </>
);

const Foo = () => (
  <Profiler id="root">
    <Bar />
    <C />
  </Profiler>
);

Given the above example:

	A	B	root
update A	✓		✓
update B	✓	✓	✓
update C			✓