[core] Add debug values to various hooks (mui#19515)

packages/material-ui-styles/src/makeStyles/makeStyles.js

@@ -201,7 +201,7 @@ export default function makeStyles(stylesOrCreator, options = {}) {
     classNamePrefix,
   };
 
-  return (props = {}) => {
+  const useStyles = (props = {}) => {
     const theme = useTheme() || defaultTheme;
     const stylesOptions = {
       ...React.useContext(StylesContext),
@@ -236,6 +236,14 @@ export default function makeStyles(stylesOrCreator, options = {}) {
       shouldUpdate.current = true;
     });
 
-    return getClasses(instance.current, props.classes, Component);
+    const classes = getClasses(instance.current, props.classes, Component);
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useDebugValue(classes);
+    }
+
+    return classes;
   };
+
+  return useStyles;
 }

packages/material-ui-styles/src/useTheme/useTheme.js

@@ -2,5 +2,12 @@ import React from 'react';
 import ThemeContext from './ThemeContext';
 
 export default function useTheme() {
-  return React.useContext(ThemeContext);
+  const theme = React.useContext(ThemeContext);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue(theme);
+  }
+
+  return theme;
 }

packages/material-ui/scripts/rollup.config.js

@@ -41,7 +41,21 @@ const commonjsOptions = {
 };
 
 function onwarn(warning) {
-  throw Error(warning.message);
+  if (
+    warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
+    warning.source === 'react' &&
+    warning.names.filter((identifier) => identifier !== 'useDebugValue').length === 0
+  ) {
+    // only warn for
+    // import * as React from 'react'
+    // if (__DEV__) React.useDebugValue()
+    // React.useDebug not fully dce'd from prod bundle
+    // in the sense that it's still imported but unused. Downgrading
+    // it to a warning as a reminder to fix at some point
+    console.warn(warning.message);
+  } else {
+    throw Error(warning.message);
+  }
 }
 
 export default [

packages/material-ui/src/styles/useTheme.js

@@ -1,6 +1,14 @@
 import { useTheme as useThemeWithoutDefault } from '@material-ui/styles';
+import React from 'react';
 import defaultTheme from './defaultTheme';
 
 export default function useTheme() {
-  return useThemeWithoutDefault() || defaultTheme;
+  const theme = useThemeWithoutDefault() || defaultTheme;
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue(theme);
+  }
+
+  return theme;
 }

packages/material-ui/src/useMediaQuery/useMediaQuery.js

@@ -78,5 +78,10 @@ export default function useMediaQuery(queryInput, options = {}) {
     };
   }, [query, matchMedia, supportMatchMedia]);
 
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue({ query, match });
+  }
+
   return match;
 }

packages/material-ui/src/utils/focusVisible.js

@@ -139,5 +139,10 @@ export function useIsFocusVisible() {
     }
   }, []);
 
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue(isFocusVisible);
+  }
+
   return { isFocusVisible, onBlurVisible: handleBlurVisible, ref };
 }