[DevTools Bug]: useSyncExternalStore adds 1 to subsequent hook's number in Profiler

This issue has been tracked since 2022-09-02.

Website or app

https://codesandbox.io/s/sweet-fast-huvy9e?file=/src/App.tsx

Repro steps

  1. Open the sandbox in Google Chrome. Notice that the App component in App.tsx calls useSyncExternalStore, followed by useState. Lastly, it has an effect that simply toggles the state value every second so that it's easy to profile state changes without interacting with the UI.
  2. Open the rendered page in a new window and inspect it in Chrome DevTools.
  3. Open Components tab, select the App component, and notice that useState hook is #2. image
  4. Switch to Profiler tab and profile the page for a couple of seconds.
  5. Notice that "Why did this render?" section says "Hook 3 changed". The number should be 2. image

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

lunaruan wrote this answer on 2022-09-15

Hey! Thanks for reporting this issue! useExternalStore is in fact a hook (like useState and useEffect), so in your case, useState should be hook 2 (and not hook 1). I'm closing this, but feel free to reopen if I am misunderstanding something!

AlexTalis wrote this answer on 2022-09-15

Hi, I understand that useExternalStore is a hook and I agree that useState is hook #2. I never said it should be #1. But the profiler (2nd image) says that the component rerendered because "Hook 3 changed". That is the bug. The component changed because useState changed, so the profiler should says "Hook 2 changed".

AlexTalis wrote this answer on 2022-09-15

@lunaruan, Can you reopen this issue please? I don't have access to do it. Hopefully my previous comment explains the problem better.

lunaruan wrote this answer on 2022-09-15

Ah thanks for the explanation! I'll take a closer look in a bit

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-06
Star Count 195649
Watcher Count 6648
Fork Count 40524
Issue Count 1110

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date