feat(theme): memoize context value

Author: KatoakDR

electron/renderer/context/theme.tsx

@@ -4,16 +4,16 @@
 import type { EuiThemeColorMode } from '@elastic/eui';
 import { EuiProvider } from '@elastic/eui';
 import type { ReactNode } from 'react';
-import { createContext, useEffect, useState } from 'react';
+import { createContext, useEffect, useMemo, useState } from 'react';
 import { getThemeName, setThemeName } from '../lib/theme.js';
 
 /**
  * React context for storing theme-related data and callbacks.
  * Color mode is usually either 'light' or 'dark'.
  */
 export interface ThemeContextValue {
-  colorMode?: EuiThemeColorMode;
-  setColorMode?: (colorMode: EuiThemeColorMode) => void;
+  colorMode: EuiThemeColorMode;
+  setColorMode: (colorMode: EuiThemeColorMode) => void;
 }
 
 /**
@@ -51,8 +51,12 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = (
     setThemeName(colorMode);
   }, [colorMode]);
 
+  const contextValue = useMemo((): ThemeContextValue => {
+    return { colorMode, setColorMode };
+  }, [colorMode]);
+
   return (
-    <ThemeContext.Provider value={{ colorMode, setColorMode }}>
+    <ThemeContext.Provider value={contextValue}>
       <EuiProvider colorMode={colorMode}>{children}</EuiProvider>
     </ThemeContext.Provider>
   );