[core] Add displayName to contexts (#18468)

Author: eps1lon

docs/src/modules/components/PageContext.js

@@ -9,4 +9,8 @@ const PageContext = React.createContext({
   pages: [],
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  PageContext.displayName = 'PageContext';
+}
+
 export default PageContext;

docs/src/modules/components/ThemeContext.js

@@ -88,9 +88,13 @@ const highDensity = {
 };
 
 export const DispatchContext = React.createContext(() => {
-  throw new Error('Forgot to wrap component in ThemeContext.Provider');
+  throw new Error('Forgot to wrap component in `ThemeProvider`');
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  DispatchContext.displayName = 'ThemeDispatchContext';
+}
+
 const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
 export function ThemeProvider(props) {

packages/material-ui-lab/src/TreeView/TreeViewContext.js

@@ -3,4 +3,10 @@ import React from 'react';
 /**
  * @ignore - internal component.
  */
-export default React.createContext({});
+const TreeViewContext = React.createContext({});
+
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewContext.displayName = 'TreeViewContext';
+}
+
+export default TreeViewContext;

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

@@ -28,6 +28,10 @@ const defaultOptions = {
 
 export const StylesContext = React.createContext(defaultOptions);
 
+if (process.env.NODE_ENV !== 'production') {
+  StylesContext.displayName = 'StylesContext';
+}
+
 let injectFirstNode;
 
 function StylesProvider(props) {

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

@@ -2,4 +2,8 @@ import React from 'react';
 
 const ThemeContext = React.createContext(null);
 
+if (process.env.NODE_ENV !== 'production') {
+  ThemeContext.displayName = 'ThemeContext';
+}
+
 export default ThemeContext;

packages/material-ui/src/ExpansionPanel/ExpansionPanelContext.js

@@ -6,4 +6,8 @@ import React from 'react';
  */
 const ExpansionPanelContext = React.createContext({});
 
+if (process.env.NODE_ENV !== 'production') {
+  ExpansionPanelContext.displayName = 'ExpansionPanelContext';
+}
+
 export default ExpansionPanelContext;

packages/material-ui/src/FormControl/FormControlContext.js

@@ -5,6 +5,10 @@ import React from 'react';
  */
 const FormControlContext = React.createContext();
 
+if (process.env.NODE_ENV !== 'production') {
+  FormControlContext.displayName = 'FormControlContext';
+}
+
 export function useFormControl() {
   return React.useContext(FormControlContext);
 }

packages/material-ui/src/List/ListContext.js

@@ -5,4 +5,8 @@ import React from 'react';
  */
 const ListContext = React.createContext({});
 
+if (process.env.NODE_ENV !== 'production') {
+  ListContext.displayName = 'ListContext';
+}
+
 export default ListContext;

packages/material-ui/src/RadioGroup/RadioGroupContext.js

@@ -5,4 +5,8 @@ import React from 'react';
  */
 const RadioGroupContext = React.createContext();
 
+if (process.env.NODE_ENV !== 'production') {
+  RadioGroupContext.displayName = 'RadioGroupContext';
+}
+
 export default RadioGroupContext;

packages/material-ui/src/Table/TableContext.js

@@ -5,4 +5,8 @@ import React from 'react';
  */
 const TableContext = React.createContext();
 
+if (process.env.NODE_ENV !== 'production') {
+  TableContext.displayName = 'TableContext';
+}
+
 export default TableContext;

packages/material-ui/src/Table/Tablelvl2Context.js

@@ -5,4 +5,8 @@ import React from 'react';
  */
 const Tablelvl2Context = React.createContext();
 
+if (process.env.NODE_ENV !== 'production') {
+  Tablelvl2Context.displayName = 'Tablelvl2Context';
+}
+
 export default Tablelvl2Context;

packages/material-ui/src/test-utils/RenderMode.js

@@ -3,6 +3,10 @@ import * as PropTypes from 'prop-types';
 
 const Context = React.createContext();
 
+if (process.env.NODE_ENV !== 'production') {
+  Context.displayName = 'RenderContext';
+}
+
 /**
  * @ignore - internal component.
  */