{"patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 1b285b562e..487aebe630 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -39,6 +39,7 @@ type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;\n \/\/ Used to track hooks called during a render\n \n type HookLogEntry = {\n+ displayName: string | null,\n primitive: string,\n stackError: Error,\n value: mixed,\n@@ -171,6 +172,7 @@ function use(usable: Usable): T {\n case 'fulfilled': {\n const fulfilledValue: T = thenable.value;\n hookLog.push({\n+ displayName: null,\n primitive: 'Promise',\n stackError: new Error(),\n value: fulfilledValue,\n@@ -187,6 +189,7 @@ function use(usable: Usable): T {\n \/\/ If this was an uncached Promise we have to abandon this attempt\n \/\/ but we can still emit anything up until this point.\n hookLog.push({\n+ displayName: null,\n primitive: 'Unresolved',\n stackError: new Error(),\n value: thenable,\n@@ -199,6 +202,7 @@ function use(usable: Usable): T {\n const value = readContext(context);\n \n hookLog.push({\n+ displayName: context.displayName || 'Context',\n primitive: 'Context (use)',\n stackError: new Error(),\n value,\n@@ -215,6 +219,7 @@ function use(usable: Usable): T {\n \n function useContext(context: ReactContext): T {\n hookLog.push({\n+ displayName: context.displayName || null,\n primitive: 'Context',\n stackError: new Error(),\n value: context._currentValue,\n@@ -235,6 +240,7 @@ function useState(\n initialState()\n : initialState;\n hookLog.push({\n+ displayName: null,\n primitive: 'State',\n stackError: new Error(),\n value: state,\n@@ -256,6 +262,7 @@ function useReducer(\n state = init !== undefined ? init(initialArg) : ((initialArg: any): S);\n }\n hookLog.push({\n+ displayName: null,\n primitive: 'Reducer',\n stackError: new Error(),\n value: state,\n@@ -268,6 +275,7 @@ function useRef(initialValue: T): {current: T} {\n const hook = nextHook();\n const ref = hook !== null ? hook.memoizedState : {current: initialValue};\n hookLog.push({\n+ displayName: null,\n primitive: 'Ref',\n stackError: new Error(),\n value: ref.current,\n@@ -279,6 +287,7 @@ function useRef(initialValue: T): {current: T} {\n function useCacheRefresh(): () => void {\n const hook = nextHook();\n hookLog.push({\n+ displayName: null,\n primitive: 'CacheRefresh',\n stackError: new Error(),\n value: hook !== null ? hook.memoizedState : function refresh() {},\n@@ -293,6 +302,7 @@ function useLayoutEffect(\n ): void {\n nextHook();\n hookLog.push({\n+ displayName: null,\n primitive: 'LayoutEffect',\n stackError: new Error(),\n value: create,\n@@ -306,6 +316,7 @@ function useInsertionEffect(\n ): void {\n nextHook();\n hookLog.push({\n+ displayName: null,\n primitive: 'InsertionEffect',\n stackError: new Error(),\n value: create,\n@@ -319,6 +330,7 @@ function useEffect(\n ): void {\n nextHook();\n hookLog.push({\n+ displayName: null,\n primitive: 'Effect',\n stackError: new Error(),\n value: create,\n@@ -341,6 +353,7 @@ function useImperativeHandle(\n instance = ref.current;\n }\n hookLog.push({\n+ displayName: null,\n primitive: 'ImperativeHandle',\n stackError: new Error(),\n value: instance,\n@@ -350,6 +363,7 @@ function useImperativeHandle(\n \n function useDebugValue(value: any, formatterFn: ?(value: any) => any) {\n hookLog.push({\n+ displayName: null,\n primitive: 'DebugValue',\n stackError: new Error(),\n value: typeof formatterFn === 'function' ? formatterFn(value) : value,\n@@ -360,6 +374,7 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {\n function useCallback(callback: T, inputs: Array | void | null): T {\n const hook = nextHook();\n hookLog.push({\n+ displayName: null,\n primitive: 'Callback',\n stackError: new Error(),\n value: hook !== null ? hook.memoizedState[0] : callback,\n@@ -375,6 +390,7 @@ function useMemo(\n const hook = nextHook();\n const value = hook !== null ? hook.memoizedState[0] : nextCreate();\n hookLog.push({\n+ displayName: null,\n primitive: 'Memo',\n stackError: new Error(),\n value,\n@@ -395,6 +411,7 @@ function useSyncExternalStore(\n nextHook(); \/\/ Effect\n const value = getSnapshot();\n hookLog.push({\n+ displayName: null,\n primitive: 'SyncExternalStore',\n stackError: new Error(),\n value,\n@@ -413,6 +430,7 @@ function useTransition(): [\n nextHook(); \/\/ State\n nextHook(); \/\/ Callback\n hookLog.push({\n+ displayName: null,\n primitive: 'Transition',\n stackError: new Error(),\n value: undefined,\n@@ -424,6 +442,7 @@ function useTransition(): [\n function useDeferredValue(value: T, initialValue?: T): T {\n const hook = nextHook();\n hookLog.push({\n+ displayName: null,\n primitive: 'DeferredValue',\n stackError: new Error(),\n value: hook !== null ? hook.memoizedState : value,\n@@ -436,6 +455,7 @@ function useId(): string {\n const hook = nextHook();\n const id = hook !== null ? hook.memoizedState : '';\n hookLog.push({\n+ displayName: null,\n primitive: 'Id',\n stackError: new Error(),\n value: id,\n@@ -485,6 +505,7 @@ function useOptimistic(\n state = passthrough;\n }\n hookLog.push({\n+ displayName: null,\n primitive: 'Optimistic',\n stackError: new Error(),\n value: state,\n@@ -507,6 +528,7 @@ function useFormState(\n state = initialState;\n }\n hookLog.push({\n+ displayName: null,\n primitive: 'FormState',\n stackError: new Error(),\n value: state,\n@@ -780,7 +802,7 @@ function buildTree(\n }\n prevStack = stack;\n }\n- const {primitive, debugInfo} = hook;\n+ const {displayName, primitive, debugInfo} = hook;\n \n \/\/ For now, the \"id\" of stateful hooks is just the stateful hook index.\n \/\/ Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).\n@@ -795,7 +817,7 @@ function buildTree(\n \n \/\/ For the time being, only State and Reducer hooks support runtime overrides.\n const isStateEditable = primitive === 'Reducer' || primitive === 'State';\n- const name = primitive === 'Context (use)' ? 'Context' : primitive;\n+ const name = displayName || primitive;\n const levelChild: HooksNode = {\n id,\n isStateEditable,\ndiff --git a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js\nindex 1fc54ef0f9..1c6eea2606 100644\n--- a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js\n+++ b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js\n@@ -772,8 +772,11 @@ describe('ReactHooksInspectionIntegration', () => {\n \n it('should inspect the value of the current provider in useContext', () => {\n const MyContext = React.createContext('default');\n+ const ThemeContext = React.createContext('default');\n+ ThemeContext.displayName = 'Theme';\n function Foo(props) {\n const value = React.useContext(MyContext);\n+ React.useContext(ThemeContext);\n return
{value}<\/div>;\n }\n const renderer = ReactTestRenderer.create(\n@@ -799,6 +802,20 @@ describe('ReactHooksInspectionIntegration', () => {\n \"subHooks\": [],\n \"value\": \"contextual\",\n },\n+ {\n+ \"debugInfo\": null,\n+ \"hookSource\": {\n+ \"columnNumber\": 0,\n+ \"fileName\": \"**\",\n+ \"functionName\": \"Foo\",\n+ \"lineNumber\": 0,\n+ },\n+ \"id\": null,\n+ \"isStateEditable\": false,\n+ \"name\": \"Theme\",\n+ \"subHooks\": [],\n+ \"value\": \"default\",\n+ },\n ]\n `);\n });\n","parents":["118ad2afa75a44fe3715ad7fb0023c408125bef7"],"body":"","files":[{"status":"M","path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js"},{"status":"M","path":"packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspectionIntegration-test.js"}],"commit":{"authorEmail":"silbermann.sebastian@gmail.com","revision":"aed00dacfb79d17c53218404c52b1c7aa59c4a89","subject":"devtools: Use context displayName for context hook name (#25954)","authorName":"Sebastian Silbermann","authoredAt":"2024-02-24T11:54:26+01:00","shortRevision":"aed00dacfb"}}

dillon1000/react

Files changed