Browse Source

Memoize context value

Azat Belgibayev 2 years ago
parent
commit
17862e21f1
1 changed files with 11 additions and 8 deletions
  1. 11 8
      kafka-ui-react-app/src/components/contexts/ThemeModeContext.tsx

+ 11 - 8
kafka-ui-react-app/src/components/contexts/ThemeModeContext.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { FC, PropsWithChildren } from 'react';
 import type { FC, PropsWithChildren } from 'react';
 import type { ThemeDropDownValue } from 'components/NavBar/NavBar';
 import type { ThemeDropDownValue } from 'components/NavBar/NavBar';
 
 
@@ -41,14 +41,17 @@ export const ThemeModeProvider: FC<PropsWithChildren<unknown>> = ({
     [setThemeModeState]
     [setThemeModeState]
   );
   );
 
 
+  const contextValue = useMemo(
+    () => ({
+      isDarkMode,
+      themeMode,
+      setThemeMode,
+    }),
+    [isDarkMode, themeMode, setThemeMode]
+  );
+
   return (
   return (
-    <ThemeModeContext.Provider
-      value={{
-        isDarkMode,
-        themeMode,
-        setThemeMode,
-      }}
-    >
+    <ThemeModeContext.Provider value={contextValue}>
       {children}
       {children}
     </ThemeModeContext.Provider>
     </ThemeModeContext.Provider>
   );
   );