From 5037b4e2e6e3f9136cdc52581828f59e7dcd2043 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 30 Aug 2021 21:44:12 +0200
Subject: [PATCH] devtools: Don't display hook index of useContext (#22200)

---
 .../views/Components/InspectedElementHooksTree.js      |  2 +-
 .../src/app/InspectableElements/CustomHooks.js         | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index a2ada2bf7735..b478aeb44129 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/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>
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
index 461535cf4b48..c04496544540 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
+++ b/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();