perf: memoize ThemeProvider

src/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext } from "react"
+import React, { createContext, useMemo } from "react"
 import { ThemeProvider as BaseThemeProvider } from "styled-components"
 
 import { darkTheme, lightTheme } from "./design/themes"
@@ -19,14 +19,25 @@ export const ThemeContext = createContext<IThemeContext | null>(null)
 
 const ThemeProvider = ({ children }: IThemeProviderProps) => {
   const [theme, setTheme] = useLocalStorage("theme", "light")
-  const themeObject = theme === "dark" ? darkTheme : lightTheme
 
-  const toggleTheme = () => {
+  const themeObject = useMemo(
-    setTheme(theme === "light" ? "dark" : "light")
+    () => (theme === "dark" ? darkTheme : lightTheme),
-  }
+    [theme]
+  )
+
+  const contextValue = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      toggleTheme: () => {
+        setTheme(theme === "light" ? "dark" : "light")
+      },
+    }),
+    [theme, setTheme]
+  )
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+    <ThemeContext.Provider value={contextValue}>
       <BaseThemeProvider theme={themeObject}>{children}</BaseThemeProvider>
     </ThemeContext.Provider>
   )