Skip to content

Conversation

@Biki-das
Copy link
Contributor

@Biki-das Biki-das commented Oct 14, 2025

When trying to use useSyncExternalStore hook , in a component and we try to profile the same, the hook count makes an additional count, say for example like in the below code, which i ran in the devtools shell test app

import * as React from 'react';
import {useState, useSyncExternalStore} from 'react';

export function Test() {
  useSyncExternalStore(
    () => {
      console.log('subscribe');
      return () => console.log('unsubscribe');
    },
    () => {
      console.log('getSnapshot');
      return 0;
    },
    () => {
      console.log('getServerSnapshot');
      return 0;
    },
  );
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </>
  );
}

when ran, the why did it render shows hook count as 3, which is kind of wrong, as it should be rather 2 in this case. Below are the screen recording observation on after & before the fixes

Before fixes

Screen.Recording.2025-10-11.at.11.26.17.PM.mov

After fixes

Screen.Recording.2025-10-11.at.11.29.41.PM.mov

As i went deep to search for the internal implementation for the useSyncExternalStore, which is below
https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L1634, if observed closely it calls two hooks internally, so internal implementation it is fine, but for the general profiler count, it should be a single hook
Screenshot 2025-10-14 at 10 29 47 PM

useSyncExternalStore creates two internal hooks namely mountEffect & pushSimpleEffect, but should be reported
as a single hook in DevTools. Skip internal hooks when calculating
indices so the profiler shows the correct hook that triggered the render
@meta-cla meta-cla bot added the CLA Signed label Oct 14, 2025
@Biki-das
Copy link
Contributor Author

cc @hoxyq looking forward to your thoughts.

@hoxyq hoxyq self-requested a review October 14, 2025 17:13
@hoxyq
Copy link
Contributor

hoxyq commented Oct 15, 2025

Duplicate of #34547.

@hoxyq hoxyq closed this Oct 15, 2025
@Biki-das Biki-das deleted the devtools-useSync-fix branch October 15, 2025 05:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants