From 9ca9d4047f03065708f106708356cfec73b30eff Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Tue, 1 Feb 2022 14:11:56 +0000
Subject: [PATCH] Fix unnecessary top-level context changes (#1924)

Reviewed-by: Titus Wormer <tituswormer@gmail.com>

Closes GH-1924.
---
 packages/react/lib/index.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/react/lib/index.js b/packages/react/lib/index.js
index de8ad9b88..30cbf9726 100644
--- a/packages/react/lib/index.js
+++ b/packages/react/lib/index.js
@@ -65,15 +65,19 @@ export function withMDXComponents(Component) {
  */
 export function useMDXComponents(components) {
   const contextComponents = React.useContext(MDXContext)
-
-  // Custom merge via a function prop
-  if (typeof components === 'function') {
-    return components(contextComponents)
-  }
-
-  return {...contextComponents, ...components}
+  // Memoize to avoid unnecessary top-level context changes
+  return React.useMemo(() => {
+    // Custom merge via a function prop
+    if (typeof components === 'function') {
+      return components(contextComponents)
+    }
+    return {...contextComponents, ...components}
+  }, [contextComponents, components])
 }
 
+/** @type {Components} */
+const emptyObject = {}
+
 /**
  * Provider for MDX context
  *
@@ -84,7 +88,7 @@ export function MDXProvider({components, children, disableParentContext}) {
   let allComponents = useMDXComponents(components)
 
   if (disableParentContext) {
-    allComponents = components || {}
+    allComponents = components || emptyObject
   }
 
   return React.createElement(