Avoid spurious re-renders in context providers

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -1,24 +1,27 @@
 import { useTheme } from "$/utils/react-theme";
-import { createElement, useEffect } from "react";
+import { createElement, useCallback, useEffect, useMemo } from "react";
 import { ColorModeContext, defaultColorMode } from "$/utils/context";
 
 export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
 
-  const toggleColorMode = () => {
+  const toggleColorMode = useCallback(() => {
     setTheme(resolvedTheme === "light" ? "dark" : "light");
-  };
+  }, [resolvedTheme, setTheme]);
 
-  const setColorMode = (mode) => {
-    const allowedModes = ["light", "dark", "system"];
-    if (!allowedModes.includes(mode)) {
-      console.error(
-        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
-      );
-      mode = defaultColorMode;
-    }
-    setTheme(mode);
-  };
+  const setColorMode = useCallback(
+    (mode) => {
+      const allowedModes = ["light", "dark", "system"];
+      if (!allowedModes.includes(mode)) {
+        console.error(
+          `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
+        );
+        mode = defaultColorMode;
+      }
+      setTheme(mode);
+    },
+    [setTheme],
+  );
 
   useEffect(() => {
     const radixRoot = document.querySelector(
@@ -30,16 +33,20 @@ export default function RadixThemesColorModeProvider({ children }) {
     }
   }, [resolvedTheme]);
 
-  return createElement(
-    ColorModeContext.Provider,
-    {
-      value: {
-        rawColorMode: theme,
-        resolvedColorMode: resolvedTheme,
-        toggleColorMode,
-        setColorMode,
-      },
-    },
-    children,
+  return useMemo(
+    () =>
+      createElement(
+        ColorModeContext.Provider,
+        {
+          value: {
+            rawColorMode: theme,
+            resolvedColorMode: resolvedTheme,
+            toggleColorMode,
+            setColorMode,
+          },
+        },
+        children,
+      ),
+    [theme, resolvedTheme, toggleColorMode, setColorMode, children],
   );
 }

reflex/.templates/web/utils/react-theme.js

@@ -69,7 +69,7 @@ export function ThemeProvider({ children, defaultTheme = "system" }) {
     return () => {
       mediaQuery.removeEventListener("change", handleChange);
     };
-  });
+  }, []);
 
   // Save theme to localStorage whenever it changes
   // Skip saving only if theme key already exists and we haven't initialized yet

reflex/.templates/web/utils/state.js

@@ -4,7 +4,7 @@ import JSON5 from "json5";
 import env from "$/env.json";
 import reflexEnvironment from "$/reflex.json";
 import Cookies from "universal-cookie";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   useLocation,
   useNavigate,

reflex/app.py

@@ -239,10 +239,15 @@ def default_error_boundary(*children: Component, **props) -> Component:
         The default error_boundary, which is an ErrorBoundary.
 
     """
-    return ErrorBoundary.create(
-        *children,
-        **props,
-    )
+    from reflex.components.component import memo
+
+    def memoized_error_boundary():
+        return ErrorBoundary.create(
+            *children,
+            **props,
+        )
+
+    return Fragment.create(memo(memoized_error_boundary)())
 
 
 @dataclasses.dataclass(frozen=True)

reflex/compiler/templates.py

@@ -395,11 +395,11 @@ def context_template(
     initialEvents,
     clientStorage,
   )
-  return createElement(
+  return useMemo(() => createElement(
     EventLoopContext.Provider,
     {{ value: [addEvents, connectErrors] }},
     children
-  );
+  ), [addEvents, connectErrors, children]);
 }}
 
 export function StateProvider({{ children }}) {{