From 3ac00598ff76a13290584aed8c78f8e5a8db41ac Mon Sep 17 00:00:00 2001
From: yusheng chen <samuel871211@gmail.com>
Date: Sun, 23 Mar 2025 21:29:46 +0800
Subject: [PATCH 1/2] perf: add `useMemo` to the return value of `useTheme`

---
 client/src/lib/useTheme.ts | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/src/lib/useTheme.ts b/client/src/lib/useTheme.ts
index c73159b..8e598e1 100644
--- a/client/src/lib/useTheme.ts
+++ b/client/src/lib/useTheme.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 type Theme = "light" | "dark" | "system";
 
@@ -35,17 +35,18 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
     };
   }, [theme]);
-
-  return [
+  
+  const setThemeWithSideEffect = useCallback((newTheme: Theme) => {
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    if (newTheme !== "system") {
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+    }
+  }, []);
+  return useMemo(() => [
     theme,
-    useCallback((newTheme: Theme) => {
-      setTheme(newTheme);
-      localStorage.setItem("theme", newTheme);
-      if (newTheme !== "system") {
-        document.documentElement.classList.toggle("dark", newTheme === "dark");
-      }
-    }, []),
-  ];
+    setThemeWithSideEffect,
+  ], [theme]);
 };
 
 export default useTheme;

From f09d2b6096685d4f8a24e8007e1971b70f0b01bd Mon Sep 17 00:00:00 2001
From: yusheng chen <samuel871211@gmail.com>
Date: Fri, 28 Mar 2025 07:05:22 +0800
Subject: [PATCH 2/2] style: prettier format file `client/src/lib/useTheme.ts`

---
 client/src/lib/useTheme.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/lib/useTheme.ts b/client/src/lib/useTheme.ts
index 8e598e1..9e76611 100644
--- a/client/src/lib/useTheme.ts
+++ b/client/src/lib/useTheme.ts
@@ -35,7 +35,7 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
     };
   }, [theme]);
-  
+
   const setThemeWithSideEffect = useCallback((newTheme: Theme) => {
     setTheme(newTheme);
     localStorage.setItem("theme", newTheme);
@@ -43,10 +43,7 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       document.documentElement.classList.toggle("dark", newTheme === "dark");
     }
   }, []);
-  return useMemo(() => [
-    theme,
-    setThemeWithSideEffect,
-  ], [theme]);
+  return useMemo(() => [theme, setThemeWithSideEffect], [theme]);
 };
 
 export default useTheme;