Added display names to public React contexts in development builds (#2428)

* feat: Add display names to public React contexts

* yarn changeset

* Update .changeset/olive-zebras-pump.md

Co-authored-by: Mateusz Burzyński <[email protected]>

Author: eps1lon

.changeset/olive-zebras-pump.md

@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+Added display names to public React contexts in development builds. This helps to recognize them in React Developer Tools.

packages/react/src/context.js

@@ -18,6 +18,10 @@ let EmotionCacheContext: React.Context<EmotionCache | null> =
       : null
   )
 
+if (process.env.NODE_ENV !== 'production') {
+  EmotionCacheContext.displayName = 'EmotionCacheContext'
+}
+
 export let CacheProvider = EmotionCacheContext.Provider
 
 export let __unsafe_useEmotionCache =

packages/react/src/theming.js

@@ -4,6 +4,9 @@ import weakMemoize from '@emotion/weak-memoize'
 import hoistNonReactStatics from './isolated-hoist-non-react-statics-do-not-use-this-in-your-code'
 
 export const ThemeContext = /* #__PURE__ */ React.createContext<Object>({})
+if (process.env.NODE_ENV !== 'production') {
+  ThemeContext.displayName = 'EmotionThemeContext'
+}
 
 export const useTheme = () => React.useContext(ThemeContext)