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

[hoxyq]

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

[jamesbvaughan]

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

[jamesbvaughan]

I've put put a PR: #28399

[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.

[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.

[gm-al]

hey @hoxyq did you work on this?

[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?

[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.