Reduce redraws

src/transaction/TraceItem.tsx

@@ -84,7 +84,30 @@ const TraceItem: React.FC<TraceItemProps> = ({
             expanded ? "" : "hidden"
           }`}
         >
-          {t.children.map((tc, i, a) => (
+          <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}
@@ -94,10 +117,9 @@ const TraceItem: React.FC<TraceItemProps> = ({
             resolvedAddresses={resolvedAddresses}
           />
         ))}
-        </div>
-      )}
       </>
     );
-};
+  }
+);
 
 export default TraceItem;