increase performance

package.json

@@ -33,7 +33,6 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "predeploy": "yarn run build",
     "deploy": "gh-pages -d build"
   },
   "eslintConfig": {

src/app/layout.tsx

@@ -1,3 +1,5 @@
+import React, { useMemo } from "react";
+
 import Header from "./../components/header";
 import Footer from "./../components/footer";
 import { veryFullArgs } from "./../configs/types";
@@ -9,18 +11,32 @@ export function Layout({
   toggleTheme,
   children,
 }: veryFullArgs) {
+  // Memoize the Header component
+  const memoizedHeader = useMemo(
+    () => (
+      <Header
+        lang={lang}
+        toggleLang={toggleLang}
+        theme={theme}
+        toggleTheme={toggleTheme}
+      />
+    ),
+    [lang, toggleLang, theme, toggleTheme]
+  );
+
+  // Memoize the Footer component
+  const memoizedFooter = useMemo(
+    () => <Footer lang={lang} theme={theme} slug="/" />,
+    [lang, theme]
+  );
+
   return (
     <div className="flex flex-col justify-between h-screen">
       <div className="flex flex-col w-full">
-        <Header
-          lang={lang}
-          toggleLang={toggleLang}
-          theme={theme}
-          toggleTheme={toggleTheme}
-        />
+        {memoizedHeader}
         {children}
       </div>
-      <Footer lang={lang} theme={theme} slug="/" />
+      {memoizedFooter}
     </div>
   );
 }