From 38a6c02abeca0d3b4c41ffc9302a3879444e5b82 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Fri, 27 Sep 2024 12:46:30 -0700
Subject: [PATCH] Apply optimization

---
 packages/desktop-client/src/style/theme.tsx | 47 ++++++++++++---------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/packages/desktop-client/src/style/theme.tsx b/packages/desktop-client/src/style/theme.tsx
index 073a5320c8d..18ce56e6ac9 100644
--- a/packages/desktop-client/src/style/theme.tsx
+++ b/packages/desktop-client/src/style/theme.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import { useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
 import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
 import type { DarkTheme, Theme } from 'loot-core/src/types/prefs';
@@ -52,42 +52,49 @@ export function ThemeStyle() {
     | undefined
   >(undefined);
 
+  const darkThemeMediaQueryListener = useCallback(
+    (event: MediaQueryListEvent) => {
+      if (event.matches) {
+        setThemeColors(themes[darkThemePreference].colors);
+      } else {
+        setThemeColors(themes['light'].colors);
+      }
+    },
+    [darkThemePreference],
+  );
+
   useLayoutEffect(() => {
     if (theme === 'auto') {
-      const darkTheme = themes[darkThemePreference];
-
-      function darkThemeMediaQueryListener(event: MediaQueryListEvent) {
-        if (event.matches) {
-          setThemeColors(darkTheme.colors);
-        } else {
-          setThemeColors(themes['light'].colors);
-        }
-      }
       const darkThemeMediaQuery = window.matchMedia(
         '(prefers-color-scheme: dark)',
       );
-
-      darkThemeMediaQuery.addEventListener(
-        'change',
-        darkThemeMediaQueryListener,
-      );
-
       if (darkThemeMediaQuery.matches) {
-        setThemeColors(darkTheme.colors);
+        setThemeColors(themes[darkThemePreference].colors);
       } else {
         setThemeColors(themes['light'].colors);
       }
+    } else {
+      setThemeColors(themes[theme].colors);
+    }
+  }, [theme, darkThemePreference]);
 
+  useEffect(() => {
+    if (theme === 'auto') {
+      const darkThemeMediaQuery = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      );
+      darkThemeMediaQuery.addEventListener(
+        'change',
+        darkThemeMediaQueryListener,
+      );
       return () => {
         darkThemeMediaQuery.removeEventListener(
           'change',
           darkThemeMediaQueryListener,
         );
       };
-    } else {
-      setThemeColors(themes[theme].colors);
     }
-  }, [theme, darkThemePreference]);
+  }, [theme, darkThemeMediaQueryListener]);
 
   if (!themeColors) return null;