From 3ea9dc764345ad8b10598d56ad019edcc7b85289 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 27 Oct 2021 15:49:15 -0300
Subject: [PATCH] Micro optimization for large traces

---
 src/components/AddressHighlighter.tsx | 31 +++++++++++++++++++++------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/AddressHighlighter.tsx b/src/components/AddressHighlighter.tsx
index e8078d6..7d37b2a 100644
--- a/src/components/AddressHighlighter.tsx
+++ b/src/components/AddressHighlighter.tsx
@@ -21,20 +21,37 @@ const AddressHighlighter: React.FC<AddressHighlighterProps> = ({
   }, [setSelection, address]);
 
   return (
-    <div
-      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
+    <AddressHighlighterImpl
+      selected={
         selection !== null &&
         selection.type === "address" &&
         selection.content === address
-          ? "border-orange-400 bg-yellow-100"
-          : "border-transparent"
+      }
+      select={select}
+      deselect={deselect}
+    >
+      {children}
+    </AddressHighlighterImpl>
+  );
+};
+
+type _AddressHighlighterImplProps = {
+  selected: boolean;
+  select: () => void;
+  deselect: () => void;
+};
+
+const AddressHighlighterImpl: React.FC<_AddressHighlighterImplProps> =
+  React.memo(({ selected, select, deselect, children }) => (
+    <div
+      className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
+        selected ? "border-orange-400 bg-yellow-100" : "border-transparent"
       }`}
       onMouseEnter={select}
       onMouseLeave={deselect}
     >
       {children}
     </div>
-  );
-};
+  ));
 
-export default React.memo(AddressHighlighter);
+export default AddressHighlighter;