memoize context value to avoid it changing each render

osakunta · Aug 22, 2024 · c5fd23f · c5fd23f
1 parent 68e7f9f
commit c5fd23f
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/lib/LanguageContext.tsx b/lib/LanguageContext.tsx
@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useState, ReactNode } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useMemo,
+} from "react";
 
 export type Language = "fi" | "sv" | "en";
 
@@ -16,9 +22,13 @@ export const LanguageProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const [language, setLanguage] = useState<Language>("en");
+  const value = useMemo(
+    () => ({ language, setLanguage }),
+    [language, setLanguage],
+  );
 
   return (
-    <LanguageContext.Provider value={{ language, setLanguage }}>
+    <LanguageContext.Provider value={value}>
       {children}
     </LanguageContext.Provider>
   );