{"parents":["29a6ca33a548ba372942dd5f0ae1c777e405610b"],"files":[{"status":"M","path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js"}],"body":"","commit":{"authoredAt":"2024-03-20T12:16:42+01:00","authorEmail":"silbermann.sebastian@gmail.com","subject":"DevTools: Read context values from context dependencies (#28467)","shortRevision":"5cec48e145","authorName":"Sebastian Silbermann","revision":"5cec48e145f6b43879b9ef40cdda812b88fff31c"},"patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 8e1809435d..a6770ccd34 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -16,6 +16,8 @@ import type {\n ReactDebugInfo,\n } from 'shared\/ReactTypes';\n import type {\n+ ContextDependency,\n+ Dependencies,\n Fiber,\n Dispatcher as DispatcherType,\n } from 'react-reconciler\/src\/ReactInternalTypes';\n@@ -33,6 +35,7 @@ import {\n REACT_MEMO_CACHE_SENTINEL,\n REACT_CONTEXT_TYPE,\n } from 'shared\/ReactSymbols';\n+import hasOwnProperty from 'shared\/hasOwnProperty';\n \n type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;\n \n@@ -139,6 +142,7 @@ function getPrimitiveStackCache(): Map> {\n \n let currentFiber: null | Fiber = null;\n let currentHook: null | Hook = null;\n+let currentContextDependency: null | ContextDependency = null;\n \n function nextHook(): null | Hook {\n const hook = currentHook;\n@@ -149,8 +153,29 @@ function nextHook(): null | Hook {\n }\n \n function readContext(context: ReactContext): T {\n- \/\/ For now we don't expose readContext usage in the hooks debugging info.\n- return context._currentValue;\n+ if (currentFiber === null) {\n+ \/\/ Hook inspection without access to the Fiber tree\n+ \/\/ e.g. when warming up the primitive stack cache or during `ReactDebugTools.inspectHooks()`.\n+ return context._currentValue;\n+ } else {\n+ if (currentContextDependency === null) {\n+ throw new Error(\n+ 'Context reads do not line up with context dependencies. This is a bug in React Debug Tools.',\n+ );\n+ }\n+\n+ \/\/ For now we don't expose readContext usage in the hooks debugging info.\n+ const value = hasOwnProperty.call(currentContextDependency, 'memoizedValue')\n+ ? \/\/ $FlowFixMe[incompatible-use] Flow thinks `hasOwnProperty` mutates `currentContextDependency`\n+ ((currentContextDependency.memoizedValue: any): T)\n+ : \/\/ Before React 18, we did not have `memoizedValue` so we rely on `setupContexts` in those versions.\n+ \/\/ $FlowFixMe[incompatible-use] Flow thinks `hasOwnProperty` mutates `currentContextDependency`\n+ ((currentContextDependency.context._currentValue: any): T);\n+ \/\/ $FlowFixMe[incompatible-use] Flow thinks `hasOwnProperty` mutates `currentContextDependency`\n+ currentContextDependency = currentContextDependency.next;\n+\n+ return value;\n+ }\n }\n \n const SuspenseException: mixed = new Error(\n@@ -218,14 +243,15 @@ function use(usable: Usable): T {\n }\n \n function useContext(context: ReactContext): T {\n+ const value = readContext(context);\n hookLog.push({\n displayName: context.displayName || null,\n primitive: 'Context',\n stackError: new Error(),\n- value: context._currentValue,\n+ value: value,\n debugInfo: null,\n });\n- return context._currentValue;\n+ return value;\n }\n \n function useState(\n@@ -1090,15 +1116,44 @@ export function inspectHooksOfFiber(\n currentHook = (fiber.memoizedState: Hook);\n currentFiber = fiber;\n \n+ if (hasOwnProperty.call(currentFiber, 'dependencies')) {\n+ \/\/ $FlowFixMe[incompatible-use]: Flow thinks hasOwnProperty might have nulled `currentFiber`\n+ const dependencies = currentFiber.dependencies;\n+ currentContextDependency =\n+ dependencies !== null ? dependencies.firstContext : null;\n+ } else if (hasOwnProperty.call(currentFiber, 'dependencies_old')) {\n+ const dependencies: Dependencies = (currentFiber: any).dependencies_old;\n+ currentContextDependency =\n+ dependencies !== null ? dependencies.firstContext : null;\n+ } else if (hasOwnProperty.call(currentFiber, 'dependencies_new')) {\n+ const dependencies: Dependencies = (currentFiber: any).dependencies_new;\n+ currentContextDependency =\n+ dependencies !== null ? dependencies.firstContext : null;\n+ } else if (hasOwnProperty.call(currentFiber, 'contextDependencies')) {\n+ const contextDependencies = (currentFiber: any).contextDependencies;\n+ currentContextDependency =\n+ contextDependencies !== null ? contextDependencies.first : null;\n+ } else {\n+ throw new Error(\n+ 'Unsupported React version. This is a bug in React Debug Tools.',\n+ );\n+ }\n+\n const type = fiber.type;\n let props = fiber.memoizedProps;\n if (type !== fiber.elementType) {\n props = resolveDefaultProps(type, props);\n }\n \n+ \/\/ Only used for versions of React without memoized context value in context dependencies.\n const contextMap = new Map, any>();\n try {\n- setupContexts(contextMap, fiber);\n+ if (\n+ currentContextDependency !== null &&\n+ !hasOwnProperty.call(currentContextDependency, 'memoizedValue')\n+ ) {\n+ setupContexts(contextMap, fiber);\n+ }\n \n if (fiber.tag === ForwardRef) {\n return inspectHooksOfForwardRef(\n@@ -1113,6 +1168,7 @@ export function inspectHooksOfFiber(\n } finally {\n currentFiber = null;\n currentHook = null;\n+ currentContextDependency = null;\n \n restoreContexts(contextMap);\n }\n"}

dillon1000/react

Files changed