Support useDebugValueLabel() hook

backend/ReactDebugHooks.js

@@ -61,6 +61,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       Dispatcher.useImperativeMethods(undefined, () => null);
       Dispatcher.useCallback(() => {});
       Dispatcher.useMemo(() => null);
+      Dispatcher.useDebugValueLabel(null);
     } finally {
       readHookLog = hookLog;
       hookLog = [];
@@ -194,6 +195,14 @@ function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
   return callback;
 }
 
+function useDebugValueLabel(valueLabel: any) {
+  hookLog.push({
+    primitive: 'DebugValueLabel',
+    stackError: new Error(),
+    value: valueLabel,
+  });
+}
+
 function useMemo<T>(
   nextCreate: () => T,
   inputs: Array<mixed> | void | null,
@@ -210,6 +219,7 @@ const Dispatcher = {
   useContext,
   useEffect,
   useImperativeMethods,
+  useDebugValueLabel,
   useLayoutEffect,
   useMemo,
   useReducer,
@@ -396,7 +406,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
         const children = [];
         levelChildren.push({
           name: parseCustomHookName(stack[j - 1].functionName),
-          value: undefined, // TODO: Support custom inspectable values.
+          value: undefined,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -410,9 +420,31 @@ function buildTree(rootStack, readHookLog): HooksTree {
       subHooks: [],
     });
   }
+
+  // Associate custom hook values (useInpect() hook entries) with the correct hooks
+  rootChildren.forEach(hooksNode => rollupDebugValueLabels(hooksNode));
+
   return rootChildren;
 }
 
+function rollupDebugValueLabels(hooksNode: HooksNode): void {
+  const useInpectHooksNodes: Array<HooksNode> = [];
+  hooksNode.subHooks = hooksNode.subHooks.filter(subHooksNode => {
+    if (subHooksNode.name === 'DebugValueLabel') {
+      useInpectHooksNodes.push(subHooksNode);
+      return false;
+    } else {
+      rollupDebugValueLabels(subHooksNode);
+      return true;
+    }
+  });
+  if (useInpectHooksNodes.length === 1) {
+    hooksNode.value = useInpectHooksNodes[0].value;
+  } else if (useInpectHooksNodes.length > 1) {
+    hooksNode.value = useInpectHooksNodes.map(({value}) => value);
+  }
+}
+
 export function inspectHooks<Props>(
   currentDispatcher: ReactCurrentDispatcher,
   renderFunction: Props => React$Node,

frontend/HooksTreeView.css

@@ -19,6 +19,7 @@
 }
 
 .nameCustom {
+  color: var(--theme-special03);
   margin: 0 0.25rem;
   cursor: pointer;
 }

frontend/HooksTreeView.js

@@ -110,7 +110,7 @@ function HooksNodeView({ hooksNode, index, inspect, path, theme }: HooksNodeView
 
         <div className={isCustomHook ? styles.nameCustom : styles.name}>
           {name}:
-        </div> {!isCustomHook && <div className={styles.value}>{preview}</div>}
+        </div> {<div className={styles.value}>{preview}</div>}
       </div>
 
       {hasBeenHydrated && isOpen &&

test/example/target.js

@@ -40,18 +40,34 @@ ThemeContext.displayName = 'ThemeContext';
 
 const LocaleContext = React.createContext('en-US');
 
-const {useCallback, useEffect, useState} = React;
+const {useCallback, useDebugValueLabel, useEffect, useState} = React;
 
 // Below copied from https://usehooks.com/
-function useTheme(theme) {
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  // Show the value in DevTools
+  useDebugValueLabel(debouncedValue);
+
   useEffect(
     () => {
-      for (var key in theme) {
-        document.documentElement.style.setProperty(`--${key}`, theme[key]);
-      }
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
     },
-    [theme]
+    [value, delay] // Only re-call effect if value or delay changes
   );
+
+  return debouncedValue;
 }
 // Above copied from https://usehooks.com/
 
@@ -62,11 +78,6 @@ function useNestedOuterHook() {
   return useNestedInnerHook();
 }
 
-const cssVars = {
-  'background-color': 'green',
-  color: 'white',
-};
-
 const hooksTestProps = {
   string: 'abc',
   number: 123,
@@ -78,20 +89,18 @@ const hooksTestProps = {
 
 function FunctionWithHooks(props, ref) {
   const [count, updateCount] = useState(0);
-  const onClick = useCallback(() => updateCount(count + 1), [count]);
 
-  useNestedOuterHook();
+  // Custom hook with a custom debug label
+  const debouncedCount = useDebounce(count, 1000);
 
-  useTheme(cssVars);
+  const onClick = useCallback(() => updateCount(count + 1), [count]);
 
-  const style = {
-    backgroundColor: 'var(--background-color)',
-    color: 'var(--color)',
-  };
+  // Tests nested custom hooks
+  useNestedOuterHook();
 
   return (
-    <button style={style} onClick={onClick}>
-      Count: {count}
+    <button onClick={onClick}>
+      Count: {debouncedCount}
     </button>
   );
 }