From 44e72a8a1844e237e63cd52828b8b3168b55898c Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 6 Jan 2022 15:44:54 +0200
Subject: [PATCH] Memoize the Layout a bit

---
 app/components/Layout/index.tsx | 9 +++++++--
 app/root.tsx                    | 6 +++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/components/Layout/index.tsx b/app/components/Layout/index.tsx
index 77eacd48a..b4cda4b65 100644
--- a/app/components/Layout/index.tsx
+++ b/app/components/Layout/index.tsx
@@ -1,3 +1,4 @@
+import * as React from "react";
 import { useState } from "react";
 import { HamburgerButton } from "./HamburgerButton";
 import { MobileNav } from "./MobileNav";
@@ -6,7 +7,11 @@ import { UserItem } from "./UserItem";
 import { Link } from "remix";
 import { navItems } from "~/constants";
 
-export function Layout({ children }: { children: React.ReactNode }) {
+export const Layout = React.memo(function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const [menuExpanded, setMenuExpanded] = useState(false);
 
   return (
@@ -58,4 +63,4 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <main className="layout__main">{children}</main>
     </>
   );
-}
+});
diff --git a/app/root.tsx b/app/root.tsx
index c3688d221..f06e8a312 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -31,11 +31,11 @@ export const loader: LoaderFunction = ({ context }) => {
 export const unstable_shouldReload = () => false;
 
 export default function App() {
+  const children = React.useMemo(() => <Outlet />, []);
+
   return (
     <Document>
-      <Layout>
-        <Outlet />
-      </Layout>
+      <Layout>{children}</Layout>
     </Document>
   );
 }