Reduce redraws

src/transaction/TraceItem.tsx

@@ -84,20 +84,42 @@ const TraceItem: React.FC<TraceItemProps> = ({
             expanded ? "" : "hidden"
           }`}
         >
-          {t.children.map((tc, i, a) => (
+          <TraceChildren
-            <TraceItem
+            c={t.children}
-              key={i}
+            txData={txData}
-              t={tc}
+            fourBytesMap={fourBytesMap}
-              txData={txData}
+            resolvedAddresses={resolvedAddresses}
-              last={i === a.length - 1}
+          />
-              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;