feat: Implement useCallBack

yurixander · Nov 23, 2024 · 1529f5b · 1529f5b
1 parent 9fe2520
commit 1529f5b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/components/SmartActionBar.tsx b/src/components/SmartActionBar.tsx
@@ -22,7 +22,7 @@ const SmartActionBar: FC<{className?: string}> = ({className}) => {
   const {syncState} = useClientStore()
   const {t} = useTranslation()
 
-  const {handleSwitchTheme} = useTheme()
+  const {toggleTheme} = useTheme()
 
   return (
     <div
@@ -33,7 +33,7 @@ const SmartActionBar: FC<{className?: string}> = ({className}) => {
       <SmartAction
         aria-label={t(LangKey.SwitchTheme)}
         icon={IoContrast}
-        onClick={handleSwitchTheme}>
+        onClick={toggleTheme}>
         {t(LangKey.SwitchTheme)}
       </SmartAction>
 

diff --git a/src/hooks/util/useTheme.ts b/src/hooks/util/useTheme.ts
@@ -1,13 +1,13 @@
-import {useEffect, useState} from "react"
+import {useCallback, useEffect, useState} from "react"
 
 type UseThemeReturnType = {
-  handleSwitchTheme: () => void
+  toggleTheme: () => void
   isDarkMode: boolean
 }
 
 const useTheme = (): UseThemeReturnType => {
-  const salvedTheme = localStorage.getItem("darkMode")
-  const isDarkMode = salvedTheme ? JSON.parse(salvedTheme) : false
+  const savedTheme = localStorage.getItem("darkMode")
+  const isDarkMode = savedTheme ? JSON.parse(savedTheme) : false
 
   const [isDarkTheme, setIsDarkTheme] = useState(isDarkMode)
 
@@ -23,11 +23,11 @@ const useTheme = (): UseThemeReturnType => {
     localStorage.setItem("darkMode", JSON.stringify(isDarkTheme))
   }, [isDarkTheme])
 
-  const handleSwitchTheme = (): void => {
+  const toggleTheme = useCallback(() => {
     setIsDarkTheme(!isDarkTheme)
-  }
+  }, [isDarkTheme])
 
-  return {handleSwitchTheme, isDarkMode}
+  return {toggleTheme, isDarkMode}
 }
 
 export default useTheme