fix theme cross-tab write loop (#2774)

* don't write on onUpdate, memoize

* refac useColorModeTheme

1 files changed, 23 insertions, 21 deletions

diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx
index 4f0391aa6..f3339d240 100644
--- a/src/state/shell/color-mode.tsx
+++ b/src/state/shell/color-mode.tsx
@@ -20,36 +20,38 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
   const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
 
-  const setColorModeWrapped = React.useCallback(
-    (_colorMode: persisted.Schema['colorMode']) => {
-      setColorMode(_colorMode)
-      persisted.write('colorMode', _colorMode)
-    },
-    [setColorMode],
+  const stateContextValue = React.useMemo(
+    () => ({
+      colorMode,
+      darkTheme,
+    }),
+    [colorMode, darkTheme],
   )
 
-  const setDarkThemeWrapped = React.useCallback(
-    (_darkTheme: persisted.Schema['darkTheme']) => {
-      setDarkTheme(_darkTheme)
-      persisted.write('darkTheme', _darkTheme)
-    },
-    [setDarkTheme],
+  const setContextValue = React.useMemo(
+    () => ({
+      setColorMode: (_colorMode: persisted.Schema['colorMode']) => {
+        setColorMode(_colorMode)
+        persisted.write('colorMode', _colorMode)
+      },
+      setDarkTheme: (_darkTheme: persisted.Schema['darkTheme']) => {
+        setDarkTheme(_darkTheme)
+        persisted.write('darkTheme', _darkTheme)
+      },
+    }),
+    [],
   )
 
   React.useEffect(() => {
     return persisted.onUpdate(() => {
-      setColorModeWrapped(persisted.get('colorMode'))
-      setDarkThemeWrapped(persisted.get('darkTheme'))
+      setColorMode(persisted.get('colorMode'))
+      setDarkTheme(persisted.get('darkTheme'))
     })
-  }, [setColorModeWrapped, setDarkThemeWrapped])
+  }, [])
 
   return (
-    <stateContext.Provider value={{colorMode, darkTheme}}>
-      <setContext.Provider
-        value={{
-          setDarkTheme: setDarkThemeWrapped,
-          setColorMode: setColorModeWrapped,
-        }}>
+    <stateContext.Provider value={stateContextValue}>
+      <setContext.Provider value={setContextValue}>
         {children}
       </setContext.Provider>
     </stateContext.Provider>