devtools: Don't display hook index of useContext (#22200)

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js

@@ -222,7 +222,7 @@ function HookView({
 
   let name = hook.name;
   if (enableProfilerChangedHookIndices) {
-    if (!isCustomHook) {
+    if (hookID !== null) {
       name = (
         <>
           <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>

packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js

@@ -9,10 +9,12 @@
 
 import * as React from 'react';
 import {
+  createContext,
   forwardRef,
   Fragment,
   memo,
   useCallback,
+  useContext,
   useDebugValue,
   useEffect,
   useState,
@@ -64,8 +66,13 @@ function useDeepHookF() {
   useDebugValue('useDeepHookF');
 }
 
+const ContextA = createContext('A');
+const ContextB = createContext('B');
+
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   const [count, updateCount] = useState(0);
+  // eslint-disable-next-line no-unused-vars
+  const contextValueA = useContext(ContextA);
 
   // eslint-disable-next-line no-unused-vars
   const [_, __] = useState(object);
@@ -85,6 +92,9 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   // Tests nested custom hooks
   useNestedOuterHook();
 
+  // eslint-disable-next-line no-unused-vars
+  const contextValueB = useContext(ContextB);
+
   // Verify deep nesting doesn't break
   useDeepHookA();