From a69929d6ab47e834a3535525657829c81dd97b4a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sun, 8 Aug 2021 10:44:58 +0200
Subject: [PATCH] Added display names to public React contexts in development
 builds (#2428)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add display names to public React contexts

* yarn changeset

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

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 .changeset/olive-zebras-pump.md | 5 +++++
 packages/react/src/context.js   | 4 ++++
 packages/react/src/theming.js   | 3 +++
 3 files changed, 12 insertions(+)
 create mode 100644 .changeset/olive-zebras-pump.md

diff --git a/.changeset/olive-zebras-pump.md b/.changeset/olive-zebras-pump.md
new file mode 100644
index 000000000..091546703
--- /dev/null
+++ b/.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.
diff --git a/packages/react/src/context.js b/packages/react/src/context.js
index 0620fb9e0..e74d4de21 100644
--- a/packages/react/src/context.js
+++ b/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 =
diff --git a/packages/react/src/theming.js b/packages/react/src/theming.js
index 16d1d8cd4..16c6d91cd 100644
--- a/packages/react/src/theming.js
+++ b/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)