Support custom values for custom hooks

Author: Brian Vaughn

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -55,6 +55,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       Dispatcher.useLayoutEffect(() => {});
       Dispatcher.useEffect(() => {});
       Dispatcher.useImperativeHandle(undefined, () => null);
+      Dispatcher.useDebugValueLabel(null);
       Dispatcher.useCallback(() => {});
       Dispatcher.useMemo(() => null);
     } finally {
@@ -180,6 +181,14 @@ function useImperativeHandle<T>(
   });
 }
 
+function useDebugValueLabel(valueLabel: any) {
+  hookLog.push({
+    primitive: 'DebugValueLabel',
+    stackError: new Error(),
+    value: valueLabel,
+  });
+}
+
 function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
   let hook = nextHook();
   hookLog.push({
@@ -205,7 +214,12 @@ const Dispatcher = {
   useCallback,
   useContext,
   useEffect,
+<<<<<<< HEAD
   useImperativeHandle,
+=======
+  useImperativeMethods,
+  useDebugValueLabel,
+>>>>>>> Support custom values for custom hooks
   useLayoutEffect,
   useMemo,
   useReducer,
@@ -388,7 +402,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
         let children = [];
         levelChildren.push({
           name: parseCustomHookName(stack[j - 1].functionName),
-          value: undefined, // TODO: Support custom inspectable values.
+          value: undefined,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -402,9 +416,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 {
+  let 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: CurrentDispatcherRef,
   renderFunction: Props => React$Node,

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

@@ -46,6 +46,7 @@ describe('ReactHooksInspection', () => {
   it('should inspect a simple custom hook', () => {
     function useCustom(value) {
       let [state] = React.useState(value);
+      React.useDebugValueLabel('custom hook label');
       return state;
     }
     function Foo(props) {
@@ -56,7 +57,7 @@ describe('ReactHooksInspection', () => {
     expect(tree).toEqual([
       {
         name: 'Custom',
-        value: undefined,
+        value: 'custom hook label',
         subHooks: [
           {
             name: 'State',

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.internal.js

@@ -235,6 +235,122 @@ describe('ReactHooksInspectionIntergration', () => {
     ]);
   });
 
+  describe('useDebugValueLabel', () => {
+    it('should support inspectable values for multiple custom hooks', () => {
+      function useLabeledValue(label) {
+        let [value] = React.useState(label);
+        React.useDebugValueLabel(`custom label ${label}`);
+        return value;
+      }
+      function useAnonymous(label) {
+        let [value] = React.useState(label);
+        return value;
+      }
+      function Example(props) {
+        useLabeledValue('a');
+        React.useState('b');
+        useAnonymous('c');
+        useLabeledValue('d');
+        return null;
+      }
+      let renderer = ReactTestRenderer.create(<Example />);
+      let childFiber = renderer.root.findByType(Example)._currentFiber();
+      let tree = ReactDebugTools.inspectHooksOfFiber(
+        currentDispatcher,
+        childFiber,
+      );
+      expect(tree).toEqual([
+        {
+          name: 'LabeledValue',
+          value: 'custom label a',
+          subHooks: [{name: 'State', value: 'a', subHooks: []}],
+        },
+        {
+          name: 'State',
+          value: 'b',
+          subHooks: [],
+        },
+        {
+          name: 'Anonymous',
+          value: undefined,
+          subHooks: [{name: 'State', value: 'c', subHooks: []}],
+        },
+        {
+          name: 'LabeledValue',
+          value: 'custom label d',
+          subHooks: [{name: 'State', value: 'd', subHooks: []}],
+        },
+      ]);
+    });
+
+    it('should support inspectable values for nested custom hooks', () => {
+      function useInner() {
+        React.useDebugValueLabel('inner');
+      }
+      function useOuter() {
+        React.useDebugValueLabel('outer');
+        useInner();
+      }
+      function Example(props) {
+        useOuter();
+        return null;
+      }
+      let renderer = ReactTestRenderer.create(<Example />);
+      let childFiber = renderer.root.findByType(Example)._currentFiber();
+      let tree = ReactDebugTools.inspectHooksOfFiber(
+        currentDispatcher,
+        childFiber,
+      );
+      expect(tree).toEqual([
+        {
+          name: 'Outer',
+          value: 'outer',
+          subHooks: [{name: 'Inner', value: 'inner', subHooks: []}],
+        },
+      ]);
+    });
+
+    it('should support multiple inspectable values per custom hooks', () => {
+      function useMultiLabelCustom() {
+        React.useDebugValueLabel('one');
+        React.useDebugValueLabel('two');
+        React.useDebugValueLabel('three');
+      }
+      function useSingleLabelCustom(value) {
+        React.useDebugValueLabel(`single ${value}`);
+      }
+      function Example(props) {
+        useSingleLabelCustom('one');
+        useMultiLabelCustom();
+        useSingleLabelCustom('two');
+        return null;
+      }
+      let renderer = ReactTestRenderer.create(<Example />);
+      let childFiber = renderer.root.findByType(Example)._currentFiber();
+      let tree = ReactDebugTools.inspectHooksOfFiber(
+        currentDispatcher,
+        childFiber,
+      );
+      expect(tree).toEqual([
+        {
+          name: 'SingleLabelCustom',
+          value: 'single one',
+          subHooks: [],
+        },
+        {
+          name: 'MultiLabelCustom',
+          value: ['one', 'two', 'three'],
+          subHooks: [],
+        },
+        {
+          name: 'SingleLabelCustom',
+          value: 'single two',
+          subHooks: [],
+        },
+      ]);
+    });
+  });
+
   it('should support defaultProps and lazy', async () => {
     let Suspense = React.Suspense;
 

packages/react-reconciler/src/ReactFiberDispatcher.js

@@ -13,6 +13,7 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
+  useDebugValueLabel,
   useLayoutEffect,
   useMemo,
   useReducer,
@@ -26,6 +27,7 @@ export const Dispatcher = {
   useContext,
   useEffect,
   useImperativeHandle,
+  useDebugValueLabel,
   useLayoutEffect,
   useMemo,
   useReducer,

packages/react-reconciler/src/ReactFiberHooks.js

@@ -588,6 +588,12 @@ export function useImperativeHandle<T>(
   }, nextInputs);
 }
 
+export function useDebugValueLabel(valueLabel: string): void {
+  // This hook is normally a no-op.
+  // The react-debug-hooks package injects its own implementation
+  // so that e.g. DevTools can display customhook values.
+}
+
 export function useCallback<T>(
   callback: T,
   inputs: Array<mixed> | void | null,

packages/react/src/React.js

@@ -33,6 +33,7 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
+  useDebugValueLabel,
   useLayoutEffect,
   useMemo,
   useReducer,
@@ -98,7 +99,12 @@ if (enableHooks) {
   React.useCallback = useCallback;
   React.useContext = useContext;
   React.useEffect = useEffect;
+<<<<<<< HEAD
   React.useImperativeHandle = useImperativeHandle;
+=======
+  React.useImperativeMethods = useImperativeMethods;
+  React.useDebugValueLabel = useDebugValueLabel;
+>>>>>>> Support custom values for custom hooks
   React.useLayoutEffect = useLayoutEffect;
   React.useMemo = useMemo;
   React.useReducer = useReducer;

packages/react/src/ReactHooks.js

@@ -110,3 +110,8 @@ export function useImperativeHandle<T>(
   const dispatcher = resolveDispatcher();
   return dispatcher.useImperativeHandle(ref, create, inputs);
 }
+
+export function useDebugValueLabel(valueLabel: string) {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useDebugValueLabel(valueLabel);
+}