DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions

[eps1lon]

Stack:

1. DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions #28593 <--- You're here
2. Devtools: Add support for useFormStatus #28413
3. [Devtools] Ensure initial read of useFormStatus returns NotPendingTransition #28728

Summary

As a fallback, we assume the dispatcher method name is the hook name. This holds for currently released React versions.
As a follow-up, we introduce a separate field that holds the list of possible wrappers we try to match against e.g. for useFormStatus -> dispatcher.useHostTransitionStatus (see #28413)

One downside is that sourcemaps are bugged in Jest tests and browsers (but not Node.js). See #28413 (comment). I'm trying to find out what's up with that.

How did you test this change?

• react-debug-tools tests
• inspected components with hooks (e.g. FunctionWithHooks) in the shell (requires Guard against legacy context not being supported in DevTools fixture #28596)
• Backwards compat with 16.8: https://8qq2sv.csb.app/
• Backwards compat with 17.0: https://g67r45.csb.app/
• Backwards compat with 18.0: https://ydjfsq.csb.app/
• Compat with Experimental: https://react-devtools-hook-inspection-experimental.vercel.app/

[eps1lon]

I don't see how this can happen since the dispatcher is private. Without the "wrapper -> dispatcher" assumption I'm out of ideas on how to enable arbitrary wrapper names like useHostTransitionStatus is trying to enable.

It also sounds like it contradicts the current implementation of findPrimitiveIndex where we always assumed there are two stack frames for the dispatcher method and the public method right next to each other.

[react-sizebot]

Comparing: cb6dc7a...9688f14

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	169.31 kB	169.31 kB	=	52.76 kB	52.76 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	171.13 kB	171.13 kB	=	53.33 kB	53.33 kB
facebook-www/ReactDOM-prod.classic.js	=	589.36 kB	589.36 kB	=	103.73 kB	103.73 kB
facebook-www/ReactDOM-prod.modern.js	=	566.39 kB	566.39 kB	=	99.64 kB	99.64 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+6.70%	11.24 kB	12.00 kB	+3.69%	3.63 kB	3.76 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+6.70%	11.24 kB	12.00 kB	+3.69%	3.63 kB	3.76 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+6.70%	11.24 kB	12.00 kB	+3.69%	3.63 kB	3.76 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+4.04%	34.29 kB	35.68 kB	+3.24%	8.25 kB	8.52 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+4.04%	34.29 kB	35.68 kB	+3.24%	8.25 kB	8.52 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+4.04%	34.29 kB	35.68 kB	+3.24%	8.25 kB	8.52 kB
test_utils/ReactAllWarnings.js	Deleted	64.58 kB	0.00 kB	Deleted	16.14 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+6.70%	11.24 kB	12.00 kB	+3.69%	3.63 kB	3.76 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+6.70%	11.24 kB	12.00 kB	+3.69%	3.63 kB	3.76 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+6.70%	11.24 kB	12.00 kB	+3.69%	3.63 kB	3.76 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+4.04%	34.29 kB	35.68 kB	+3.24%	8.25 kB	8.52 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+4.04%	34.29 kB	35.68 kB	+3.24%	8.25 kB	8.52 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+4.04%	34.29 kB	35.68 kB	+3.24%	8.25 kB	8.52 kB
test_utils/ReactAllWarnings.js	Deleted	64.58 kB	0.00 kB	Deleted	16.14 kB	0.00 kB

Generated by 🚫 dangerJS against 9688f14

[markerikson]

Nice to see the sourcemaps work I did coming in handy! :)

[hoxyq]

Where did this come from? Looking at the code, you are trying to use the functionName from the primitive frame, but we didn't have this before, is it a regression for some cases?

[eps1lon]

That's the core of this change. Instead of computing the hook name from the hook log, we compute it from the parent of the dispatcher call since we always have PublicReactPackage.useSomeHook calling into dispatcher.useSomePotentiallyDifferentlyNamedHook.

This doesn't really do much in this commit since the name of the public hook always matches the dispatcher call. But for useFormStatus (which we support in #28413), we have ReactDOM.useFormStatus calling into useHostTransitionStatus. Since useHostTransitionStatus can be called by a hook from a different renderer that isn't called useFormStatus (see #26719), we have to compute the name for devtools from the parent frame i.e. hookStack[primitiveIndex - 1].

But we can only use the the frame from the public method with sourcemaps because public hooks get mangled e.g. exports.useFormStatus = ia. The stack frame of exports.useFormstatus() would read at Object.ia [as useFormStatus] which is what I saw in #28413 (comment) where sourcemaps were broken. When sourcemaps are not broken i.e. outside of Jest, we get the correct stackframe reading at Object.useFormStatus which we can parse and extract the expected hook name FormStatus.

[hoxyq]

Suggested change

	displayName =
	parseHookName(primitiveFrame.functionName) ||
	// Older versions of React do not have sourcemaps.
	// In those versions there was always a 1:1 mapping between wrapper and dispatcher method.
	parseHookName(hook.dispatcherMethodName);
	}
	displayName =
	parseHookName(primitiveFrame.functionName) ||
	// Older versions of React do not have sourcemaps.
	// In those versions there was always a 1:1 mapping between wrapper and dispatcher method.
	parseHookName(hook.dispatcherMethodName) ||
	hook.primitive;
	}

[hoxyq]

At least we will be showing primitive name instead of Unknown, like it was before.

I've observed this with CustomHooks element in react-devtools-shell

[eps1lon]

Good catch. This should be fixed by though: 3deebb2 (#28593). I'll get your suggestion in is as well since it's a nicer fallback.