From 14c725ccd953ad00810a4e8f585e4fad337b1f7d Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Mon, 16 Oct 2023 12:43:31 -0400
Subject: [PATCH] fix: wrap child components in a memo

---
 src/components/App.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 582f2d3..c413557 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -5,15 +5,20 @@ import {
 } from "@/components/Browser.tsx";
 import Lume from "@/components/Lume.tsx";
 import { LumeProvider } from "@lumeweb/sdk";
+import { memo } from "react";
 
 export default function () {
+  const MemeoedNavigator = memo(Navigator);
+  const MemeoedLume = memo(Lume);
+  const MemeoedBrowser = memo(Browser);
+
   return (
     <LumeProvider>
       <BrowserStateProvider>
         <>
           <header className="relative h-14 px-2 pl-2 py-2 w-full bg-neutral-900 flex">
             <div className="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center [>input:focus]:ring-2 [>input:focus]:ring-white">
-              <Navigator />
+              <MemeoedNavigator />
             </div>
             <div className="w-32 flex justify-end">
               <Lume />