From 3b60030817df7a42bc63cb1a059ab125347a2567 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 3 Nov 2021 04:52:01 -0300
Subject: [PATCH] Reduce redraws

---
 src/transaction/TraceItem.tsx | 42 ++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/transaction/TraceItem.tsx b/src/transaction/TraceItem.tsx
index d97b63f..9f7510c 100644
--- a/src/transaction/TraceItem.tsx
+++ b/src/transaction/TraceItem.tsx
@@ -84,20 +84,42 @@ const TraceItem: React.FC<TraceItemProps> = ({
             expanded ? "" : "hidden"
           }`}
         >
-          {t.children.map((tc, i, a) => (
-            <TraceItem
-              key={i}
-              t={tc}
-              txData={txData}
-              last={i === a.length - 1}
-              fourBytesMap={fourBytesMap}
-              resolvedAddresses={resolvedAddresses}
-            />
-          ))}
+          <TraceChildren
+            c={t.children}
+            txData={txData}
+            fourBytesMap={fourBytesMap}
+            resolvedAddresses={resolvedAddresses}
+          />
         </div>
       )}
     </>
   );
 };
 
+type TraceChildrenProps = {
+  c: TraceGroup[];
+  txData: TransactionData;
+  fourBytesMap: Record<string, FourBytesEntry | null | undefined>;
+  resolvedAddresses: ResolvedAddresses | undefined;
+};
+
+const TraceChildren: React.FC<TraceChildrenProps> = React.memo(
+  ({ c, txData, fourBytesMap, resolvedAddresses }) => {
+    return (
+      <>
+        {c.map((tc, i, a) => (
+          <TraceItem
+            key={i}
+            t={tc}
+            txData={txData}
+            last={i === a.length - 1}
+            fourBytesMap={fourBytesMap}
+            resolvedAddresses={resolvedAddresses}
+          />
+        ))}
+      </>
+    );
+  }
+);
+
 export default TraceItem;