DevTools: Read context values from context dependencies

[eps1lon]

Summary

Instead of walking up the fiber tree to fill context values from the provider values we now move a cursor along the context dependencies whenever we read context.

This will allow us to read from host specific contexts where we don't have access to the context object e.g. useFormStatus().

For React versions prior to #20890 we still need to walk the fiber tree up to visit context providers since we don't have memoizedValue on the context dependency in this case.

How did you test this change?

• react-debug-tools tests
• inspected components with context hooks (e.g. FunctionalContextConsumerWithUpdates) in the shell
• Backwards compat with 16.8: https://codesandbox.io/p/sandbox/serverless-snowflake-ttrp8v
• Backwards compat with 17.0: https://codesandbox.io/p/sandbox/17-0-react-devtools-context-inspection-forked-rslrsq
• Backwards compat with 18.0: https://codesandbox.io/p/sandbox/18-0-react-devtools-context-inspection-p8ntzj
• Compat with Canary: https://codesandbox.io/p/sandbox/canary-react-devtools-context-inspection-9y5gkc

[react-sizebot]

Comparing: 0ae2b13...088fb2c

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	=	177.19 kB	177.19 kB	=	55.23 kB	55.23 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	177.72 kB	177.72 kB	=	55.55 kB	55.55 kB
facebook-www/ReactDOM-prod.classic.js	=	594.67 kB	594.67 kB	=	105.04 kB	105.04 kB
facebook-www/ReactDOM-prod.modern.js	=	577.93 kB	577.93 kB	=	102.10 kB	102.10 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+8.31%	29.68 kB	32.15 kB	+6.35%	7.64 kB	8.12 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+8.31%	29.68 kB	32.15 kB	+6.35%	7.64 kB	8.12 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+8.31%	29.68 kB	32.15 kB	+6.35%	7.64 kB	8.12 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+7.12%	9.91 kB	10.62 kB	+6.63%	3.36 kB	3.59 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+7.12%	9.91 kB	10.62 kB	+6.63%	3.36 kB	3.59 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+7.12%	9.91 kB	10.62 kB	+6.63%	3.36 kB	3.59 kB
test_utils/ReactAllWarnings.js	Deleted	66.60 kB	0.00 kB	Deleted	16.28 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.development.js	+8.31%	29.68 kB	32.15 kB	+6.35%	7.64 kB	8.12 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+8.31%	29.68 kB	32.15 kB	+6.35%	7.64 kB	8.12 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+8.31%	29.68 kB	32.15 kB	+6.35%	7.64 kB	8.12 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+7.12%	9.91 kB	10.62 kB	+6.63%	3.36 kB	3.59 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+7.12%	9.91 kB	10.62 kB	+6.63%	3.36 kB	3.59 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+7.12%	9.91 kB	10.62 kB	+6.63%	3.36 kB	3.59 kB
test_utils/ReactAllWarnings.js	Deleted	66.60 kB	0.00 kB	Deleted	16.28 kB	0.00 kB

Generated by 🚫 dangerJS against 088fb2c

[eps1lon]

This is only for ReactDebugTools.inspectHooks where we don't have access to the current fiber (we have tests that would break if we throw just because currentContextDependency is null).

[hoxyq]

Thanks! Looks good from the DevTools side, but maybe also worth waiting for a review from @sebmarkbage

[eps1lon]

Needs to be adjusted to work for React 16.8. Currently throws with Uncaught Error: Cannot read properties of undefined (reading 'firstContext')

[hoxyq]

LGTM! Can you try using @reactVersion pragma for some tests in react-debug-tools?

If yes, then you can try adding test cases that will cover compatibility with previous versions of React?
This is how we run these tests on CI:

react/.circleci/config.yml

Lines 296 to 309 in a870b2d

	run_devtools_tests_for_versions:
	docker: *docker
	environment: *environment
	parallelism: *TEST_PARALLELISM
	parameters:
	version:
	type: string
	steps:
	- checkout
	- attach_workspace:
	at: .
	- setup_node_modules
	- run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> --replaceBuild
	- run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci

[eps1lon]

If yes, then you can try adding test cases that will cover compatibility with previous versions of React?

Problem is that the inspectedElement-test is broken. I quickly looked at it and as far as I can tell, the whole test setup is broken. It uses the specified React versions for both the inspected tree and what Devtools uses. But Devtools uses its bundled React version so the test should ensure that Devtools uses the React version from the repo, while the inspected React tree uses the specified version. Since the test setup uses the specified React version for both, the test crashes since Devtools uses newer React features from the experimental release channel (e.g. useCashRefresh).

We also already have tests for context inspection. They just don't run in the first place:

react/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js

Lines 1654 to 1656 in a870b2d

	// TODO(hoxyq): Enable this test for versions ~18, currently broken
	// @reactVersion <= 18.2
	xit('should inspect hooks for components that only use context (legacy render)', async () => {