PR feedback:

1. Renamed useDebugValueLabel hook to useDebugValue
2. Wrapped useDebugValue internals in if-DEV so that it could be removed from production builds.

Author: Brian Vaughn

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

@@ -55,7 +55,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       Dispatcher.useLayoutEffect(() => {});
       Dispatcher.useEffect(() => {});
       Dispatcher.useImperativeHandle(undefined, () => null);
-      Dispatcher.useDebugValueLabel(null);
+      Dispatcher.useDebugValue(null);
       Dispatcher.useCallback(() => {});
       Dispatcher.useMemo(() => null);
     } finally {
@@ -181,9 +181,9 @@ function useImperativeHandle<T>(
   });
 }
 
-function useDebugValueLabel(valueLabel: any) {
+function useDebugValue(valueLabel: any) {
   hookLog.push({
-    primitive: 'DebugValueLabel',
+    primitive: 'DebugValue',
     stackError: new Error(),
     value: valueLabel,
   });
@@ -214,12 +214,8 @@ const Dispatcher = {
   useCallback,
   useContext,
   useEffect,
-<<<<<<< HEAD
   useImperativeHandle,
-=======
-  useImperativeMethods,
-  useDebugValueLabel,
->>>>>>> Support custom values for custom hooks
+  useDebugValue,
   useLayoutEffect,
   useMemo,
   useReducer,
@@ -418,19 +414,19 @@ function buildTree(rootStack, readHookLog): HooksTree {
   }
 
   // Associate custom hook values (useInpect() hook entries) with the correct hooks
-  rootChildren.forEach(hooksNode => rollupDebugValueLabels(hooksNode));
+  rootChildren.forEach(hooksNode => rollupDebugValues(hooksNode));
 
   return rootChildren;
 }
 
-function rollupDebugValueLabels(hooksNode: HooksNode): void {
+function rollupDebugValues(hooksNode: HooksNode): void {
   let useInpectHooksNodes: Array<HooksNode> = [];
   hooksNode.subHooks = hooksNode.subHooks.filter(subHooksNode => {
-    if (subHooksNode.name === 'DebugValueLabel') {
+    if (subHooksNode.name === 'DebugValue') {
       useInpectHooksNodes.push(subHooksNode);
       return false;
     } else {
-      rollupDebugValueLabels(subHooksNode);
+      rollupDebugValues(subHooksNode);
       return true;
     }
   });

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

@@ -46,7 +46,7 @@ describe('ReactHooksInspection', () => {
   it('should inspect a simple custom hook', () => {
     function useCustom(value) {
       let [state] = React.useState(value);
-      React.useDebugValueLabel('custom hook label');
+      React.useDebugValue('custom hook label');
       return state;
     }
     function Foo(props) {

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

@@ -235,11 +235,11 @@ describe('ReactHooksInspectionIntergration', () => {
     ]);
   });
 
-  describe('useDebugValueLabel', () => {
+  describe('useDebugValue', () => {
     it('should support inspectable values for multiple custom hooks', () => {
       function useLabeledValue(label) {
         let [value] = React.useState(label);
-        React.useDebugValueLabel(`custom label ${label}`);
+        React.useDebugValue(`custom label ${label}`);
         return value;
       }
       function useAnonymous(label) {
@@ -285,10 +285,10 @@ describe('ReactHooksInspectionIntergration', () => {
 
     it('should support inspectable values for nested custom hooks', () => {
       function useInner() {
-        React.useDebugValueLabel('inner');
+        React.useDebugValue('inner');
       }
       function useOuter() {
-        React.useDebugValueLabel('outer');
+        React.useDebugValue('outer');
         useInner();
       }
       function Example(props) {
@@ -312,12 +312,12 @@ describe('ReactHooksInspectionIntergration', () => {
 
     it('should support multiple inspectable values per custom hooks', () => {
       function useMultiLabelCustom() {
-        React.useDebugValueLabel('one');
-        React.useDebugValueLabel('two');
-        React.useDebugValueLabel('three');
+        React.useDebugValue('one');
+        React.useDebugValue('two');
+        React.useDebugValue('three');
       }
       function useSingleLabelCustom(value) {
-        React.useDebugValueLabel(`single ${value}`);
+        React.useDebugValue(`single ${value}`);
       }
       function Example(props) {
         useSingleLabelCustom('one');

packages/react-reconciler/src/ReactFiberDispatcher.js

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

packages/react-reconciler/src/ReactFiberHooks.js

@@ -588,7 +588,7 @@ export function useImperativeHandle<T>(
   }, nextInputs);
 }
 
-export function useDebugValueLabel(valueLabel: string): void {
+export function useDebugValue(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.

packages/react/src/React.js

@@ -33,7 +33,7 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
-  useDebugValueLabel,
+  useDebugValue,
   useLayoutEffect,
   useMemo,
   useReducer,
@@ -99,12 +99,8 @@ 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.useDebugValue = useDebugValue;
   React.useLayoutEffect = useLayoutEffect;
   React.useMemo = useMemo;
   React.useReducer = useReducer;

packages/react/src/ReactHooks.js

@@ -111,7 +111,9 @@ export function useImperativeHandle<T>(
   return dispatcher.useImperativeHandle(ref, create, inputs);
 }
 
-export function useDebugValueLabel(valueLabel: string) {
-  const dispatcher = resolveDispatcher();
-  return dispatcher.useDebugValueLabel(valueLabel);
+export function useDebugValue(valueLabel: string) {
+  if (__DEV__) {
+    const dispatcher = resolveDispatcher();
+    return dispatcher.useDebugValue(valueLabel);
+  }
 }