[DevTools Bug]: React Profiler reports higher hook numbers than shown in Components

iamakulov commented 4 months ago

Website or app

https://github.com/3perf/react-workshop-fwdays-mar24

Repro steps

Clone the https://github.com/3perf/react-workshop-fwdays-mar24 repository
Switch to the branch called day5
cd widgets-editor && yarn && yarn start
An app will open. Reproduce the following interaction & record a Profiler trace:

https://github.com/facebook/react/assets/2953267/fe0eb272-d136-44a6-bfe0-4f1b20ff27de
Find the first render of the ResizableComponent component in the trace
Observe React Profiler reporting “hook 32 changed” whereas the Components pane reporting only 30 hooks in the component (as in the video)

Sorry for not having a minimal repro! I was only able to reproduce this in big apps like the one attached. However, it reproduces reliably.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

eps1lon commented 4 months ago

Thank you for the detailed repro instructions. I can also reproduce this as instructed.

I have a test reproducing the issue in https://github.com/facebook/react/pull/28587 that basically just inline all 3rd party dependencies. I haven't started further reducing the repro until it no longer reproduces but this should be a good starting point if somebody wants to dig into this.

standbyoneself commented 4 months ago

Same issue. Any thoughts on this?

sarmadka commented 1 month ago

Any update on this? How is this not treated as a high priority bug anyway?

standbyoneself commented 2 weeks ago

It's really very annoying to debug component without correct profiler work. Is anybody alive here? Do you need reproduction? Or what?

facebook / react