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

[iamakulov]

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:

  CleanShot.2024-03-19.at.01.33.16.mp4

• 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]

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

I have a test reproducing the issue in #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]

Same issue. Any thoughts on this?

[sarmadka]

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

[standbyoneself]

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

[rnnc]

this is such an annoying bug, this has existed for nearly half a decade; but the people working on this are more obsessed with useless things like server components

[xaroth8088]

Issue is still present in 6.0.1 (10/15/2024)

[lauren-martini]

Still present in 6.1.5.

Any news?

[pcfreak30]

Ive just hit this as well in 6.1.5 and I have no idea where to look atm b/c it is likely something deeper in react query thats used by a dependency.

[blazejkustra]

Hey, we’re experiencing the same issue while working on a React Native project. Thanks @SzymczakJ for raising this internally 🙌

The underlying issue here is that some core React hooks (e.g. useSyncExternalStore, and likely others) internally mount more than one hook.

For example, in useSyncExternalStore React first creates a hook for itself:

const hook = mountWorkInProgressHook();

Then it also runs an effect, which internally creates another hook:

mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);

The problem in DevTools is that useSyncExternalStore is shown as a single hook in the hooks tree, but in the "What caused this render" tab it’s actually counted as two. That’s where the discrepancy comes from.

I suspect there are other hooks with similar problem (useActionState for example). I prepared a draft here, but right now it only handles useSyncExternalStore. A broader discussion is probably needed, and ideally this could be addressed directly in React itself rather than patching around it in DevTools.

Would love to hear thoughts from @eps1lon (or other maintainers) on the best path forward 👀