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 a2ada2bf77358..b478aeb441297 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 = (
<>
{hookID + 1}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
index 461535cf4b480..c04496544540f 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) {
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) {
// Tests nested custom hooks
useNestedOuterHook();
+ // eslint-disable-next-line no-unused-vars
+ const contextValueB = useContext(ContextB);
+
// Verify deep nesting doesn't break
useDeepHookA();