[DevTools Bug]: Hook parsing fails if a hook uses useSyncExternalStore

[jamesbvaughan]

Website or app

https://react-devtools-issue-demo.vercel.app/

Repro steps

1. Open up this page: https://react-devtools-issue-demo.vercel.app/ (source: https://github.com/jamesbvaughan/react-devtools-issue-demo/blob/main/src/App.tsx)
2. Open up the React dev tools
3. Navigate to the Components tab
4. Observe in the right sidebar that hook name parsing fails for one of the two components.

---

Hook name parsing is really helpful when debugging/optimizing large components with lots of hooks, and this issue makes that feature unusable on components whose hooks make use of useSyncExternalStore.

This is particularly painful for my current work, where nearly all components make use of Zustand stores, which use useSyncExternalStore internally.

---

This is the same symptom that folks are hitting in #24980, but I'm not sure whether the cause is the same for everyone there.

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

[jamesbvaughan]

I've made a bit more progress investigating this.

I believe the cause might be the two calls to nextHook in useSyncExternalStore:

react/packages/react-debug-tools/src/ReactDebugHooks.js

Lines 265 to 274 in 1d5667a

	function useSyncExternalStore<T>(
	subscribe: (() => void) => () => void,
	getSnapshot: () => T,
	getServerSnapshot?: () => T,
	): T {
	// useSyncExternalStore() composes multiple hooks internally.
	// Advance the current hook index the same number of times
	// so that subsequent hooks have the right memoized state.
	nextHook(); // SyncExternalStore
	nextHook(); // Effect

To try to verify that, I found that just one other hook in that file, useTransition, also makes two calls to nextHook:

react/packages/react-debug-tools/src/ReactDebugHooks.js

Lines 284 to 292 in 1d5667a

	function useTransition(): [
	boolean,
	(callback: () => void, options?: StartTransitionOptions) => void,
	] {
	// useTransition() composes multiple hooks internally.
	// Advance the current hook index the same number of times
	// so that subsequent hooks have the right memoized state.
	nextHook(); // State
	nextHook(); // Callback

I modified my test case to use useTransition rather than useSyncExternalStore and confirmed that it also causes hook parsing to fail.

[ganialhamad]

hey @hoxyq did you work on this?

[hoxyq]

@jamesbvaughan, thanks for reporting this! Will take a look at it in a few days and reply back.

[Nathan-Roberts123]

react/packages/react-debug-tools/src/ReactDebugHooks.js

Lines 56 to 82 in 1d5667a

	function getPrimitiveStackCache(): Map<string, Array<any>> {
	// This initializes a cache of all primitive hooks so that the top
	// most stack frames added by calling the primitive hook can be removed.
	if (primitiveStackCache === null) {
	const cache = new Map<string, Array<any>>();
	let readHookLog;
	try {
	// Use all hooks here to add them to the hook log.
	Dispatcher.useContext(({_currentValue: null}: any));
	Dispatcher.useState(null);
	Dispatcher.useReducer((s: mixed, a: mixed) => s, null);
	Dispatcher.useRef(null);
	if (typeof Dispatcher.useCacheRefresh === 'function') {
	// This type check is for Flow only.
	Dispatcher.useCacheRefresh();
	}
	Dispatcher.useLayoutEffect(() => {});
	Dispatcher.useInsertionEffect(() => {});
	Dispatcher.useEffect(() => {});
	Dispatcher.useImperativeHandle(undefined, () => null);
	Dispatcher.useDebugValue(null);
	Dispatcher.useCallback(() => {});
	Dispatcher.useMemo(() => null);
	if (typeof Dispatcher.useMemoCache === 'function') {
	// This type check is for Flow only.
	Dispatcher.useMemoCache(0);
	}

When i was trying to debug this problem i notice that here they didn't call the useSyncExternalStore and useTransition from Dispatcher so I add the line Dispatcher.useSyncExternalStore(() => {}, () => {}, () => {}) above the line Dispatcher.useMemo(() => null) in above source code, and it worked fine. I don't know if this was intentionally or it a mistake.

[hoxyq]

react/packages/react-debug-tools/src/ReactDebugHooks.js

Lines 56 to 82 in 1d5667a

	function getPrimitiveStackCache(): Map<string, Array<any>> {
	// This initializes a cache of all primitive hooks so that the top
	// most stack frames added by calling the primitive hook can be removed.
	if (primitiveStackCache === null) {
	const cache = new Map<string, Array<any>>();
	let readHookLog;
	try {
	// Use all hooks here to add them to the hook log.
	Dispatcher.useContext(({_currentValue: null}: any));
	Dispatcher.useState(null);
	Dispatcher.useReducer((s: mixed, a: mixed) => s, null);
	Dispatcher.useRef(null);
	if (typeof Dispatcher.useCacheRefresh === 'function') {
	// This type check is for Flow only.
	Dispatcher.useCacheRefresh();
	}
	Dispatcher.useLayoutEffect(() => {});
	Dispatcher.useInsertionEffect(() => {});
	Dispatcher.useEffect(() => {});
	Dispatcher.useImperativeHandle(undefined, () => null);
	Dispatcher.useDebugValue(null);
	Dispatcher.useCallback(() => {});
	Dispatcher.useMemo(() => null);
	if (typeof Dispatcher.useMemoCache === 'function') {
	// This type check is for Flow only.
	Dispatcher.useMemoCache(0);
	}

When i was trying to debug this problem i notice that here they didn't call the useSyncExternalStore and useTransition from Dispatcher so I add the line Dispatcher.useSyncExternalStore(() => {}, () => {}, () => {}) above the line Dispatcher.useMemo(() => null) in above source code, and it worked fine. I don't know if this was intentionally or it a mistake.

Sorry for a late reply. Yes, this is required for generating stack frames of primitives, so this could be the root cause of why RDT can't find useSyncExternalStore hook.

@jamesbvaughan Thanks for providing the repro! Is someone interested in testing this solution against the repro and opening a PR?

[jamesbvaughan]

@hoxyq I can try to put together a PR this week.

[jamesbvaughan]

I've put put a PR: #28399

[kenlyon]

@hoxyq Could you advise when the DevTools Firefox Extension will be updated? This issue affects me and it's good to see that it's been fixed but my browser is stuck on v5.0.0 of the extension from December.

[hoxyq]

@hoxyq Could you advise when the DevTools Firefox Extension will be updated? This issue affects me and it's good to see that it's been fixed but my browser is stuck on v5.0.0 of the extension from December.

I've uploaded v5.0.2 to Firefox store a week ago, its still pending review process.