From 707a27462dfcb17877c1f9ea497e6af93cd9ffcf Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Tue, 12 Jul 2022 13:09:00 +0200
Subject: [PATCH] Perf: Make `<AggregateKeyframeTrack>` render its children
 with memoized props

---
 .../AggregatedKeyframeTrack.tsx               | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack.tsx
index 275b1f0..9576569 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack.tsx
@@ -93,18 +93,20 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
     () => logger._debug('see aggregatedKeyframes', props.aggregatedKeyframes),
   )
 
-  const posKfs: IAggregateKeyframesAtPosition[] = [
-    ...aggregatedKeyframes.byPosition.entries(),
-  ]
-    .sort((a, b) => a[0] - b[0])
-    .map(
-      ([position, keyframes]): IAggregateKeyframesAtPosition => ({
-        position,
-        keyframes,
-        selected: selectedPositions.get(position),
-        allHere: keyframes.length === aggregatedKeyframes.tracks.length,
-      }),
-    )
+  const posKfs: IAggregateKeyframesAtPosition[] = useMemo(
+    () =>
+      [...aggregatedKeyframes.byPosition.entries()]
+        .sort((a, b) => a[0] - b[0])
+        .map(
+          ([position, keyframes]): IAggregateKeyframesAtPosition => ({
+            position,
+            keyframes,
+            selected: selectedPositions.get(position),
+            allHere: keyframes.length === aggregatedKeyframes.tracks.length,
+          }),
+        ),
+    [aggregatedKeyframes, selectedPositions],
+  )
 
   const snapPositionsState = useVal(snapPositionsStateD)
 
@@ -129,20 +131,24 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
     />
   ))
 
-  const keyframeEditorProps = posKfs.map(
-    (
-      {position, keyframes},
-      index,
-    ): {editorProps: IAggregateKeyframeEditorProps; position: number} => ({
-      position,
-      editorProps: {
-        index,
-        layoutP,
-        viewModel,
-        aggregateKeyframes: posKfs,
-        selection: selectedPositions.has(position) ? selection : undefined,
-      },
-    }),
+  const keyframeEditorProps = useMemo(
+    () =>
+      posKfs.map(
+        (
+          {position, keyframes},
+          index,
+        ): {editorProps: IAggregateKeyframeEditorProps; position: number} => ({
+          position,
+          editorProps: {
+            index,
+            layoutP,
+            viewModel,
+            aggregateKeyframes: posKfs,
+            selection: selectedPositions.has(position) ? selection : undefined,
+          },
+        }),
+      ),
+    [posKfs, viewModel, selectedPositions],
   )
 
   const [isDragging] = useDragForAggregateKeyframeDot(