devtools: Don't display hook index of useContext (#22200)
Sebastian Silbermann committed
Aug 30, 2021 at 21:44 UTC
5037b4e2e6e3f9136cdc52581828f59e7dcd2043
2 files changed
+11
-1
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+1
-1
@@ -222,7 +222,7 @@ function HookView({
222
223
let name = hook.name;
224
if (enableProfilerChangedHookIndices) {
225
- if (!isCustomHook) {
225
+ if (hookID !== null) {
226
name = (
227
<>
228
<span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
+10
@@ -9,10 +9,12 @@
9
10
import * as React from 'react';
11
import {
12
+ createContext,
13
forwardRef,
14
Fragment,
15
memo,
16
useCallback,
17
+ useContext,
18
useDebugValue,
19
useEffect,
20
useState,
@@ -64,8 +66,13 @@ function useDeepHookF() {
66
useDebugValue('useDeepHookF');
67
}
68
69
+const ContextA = createContext('A');
70
+const ContextB = createContext('B');
71
+
72
function FunctionWithHooks(props: any, ref: React$Ref<any>) {
73
const [count, updateCount] = useState(0);
74
+ // eslint-disable-next-line no-unused-vars
75
+ const contextValueA = useContext(ContextA);
76
77
// eslint-disable-next-line no-unused-vars
78
const [_, __] = useState(object);
@@ -85,6 +92,9 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
92
// Tests nested custom hooks
93
useNestedOuterHook();
94
95
+ // eslint-disable-next-line no-unused-vars
96
+ const contextValueB = useContext(ContextB);
97
+
98
// Verify deep nesting doesn't break
99
useDeepHookA();
100