From 558882ff0aa1d21235e6e4cbc3dda5e42a866b36 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Tue, 12 Jul 2022 12:10:52 +0200
Subject: [PATCH] Perf: memoize `AggregateKeyframeEditor`

---
 .../AggregateKeyframeEditor.tsx               | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeEditor.tsx
index 2165318..1c461d2 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeEditor.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeEditor.tsx
@@ -60,26 +60,24 @@ export type IAggregateKeyframeEditorProps = {
  * is open. This would require having some kind of stable identity for each aggregate row.
  * Let's defer that work until other interactive keyframe editing PRs are merged in.
  */
-const AggregateKeyframeEditor: React.VFC<IAggregateKeyframeEditorProps> = (
-  props,
-) => {
-  const utils = useAggregateKeyframeEditorUtils(props)
-
-  return (
-    <AggregateKeyframeEditorContainer
-      style={{
-        top: `${props.viewModel.nodeHeight / 2}px`,
-        left: `calc(${val(
-          props.layoutP.scaledSpace.leftPadding,
-        )}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${
-          utils.cur.position
-        }px))`,
-      }}
-    >
-      <AggregateKeyframeDot editorProps={props} utils={utils} />
-      <AggregateKeyframeConnector editorProps={props} utils={utils} />
-    </AggregateKeyframeEditorContainer>
-  )
-}
+const AggregateKeyframeEditor: React.VFC<IAggregateKeyframeEditorProps> =
+  React.memo((props) => {
+    const utils = useAggregateKeyframeEditorUtils(props)
+    return (
+      <AggregateKeyframeEditorContainer
+        style={{
+          top: `${props.viewModel.nodeHeight / 2}px`,
+          left: `calc(${val(
+            props.layoutP.scaledSpace.leftPadding,
+          )}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${
+            utils.cur.position
+          }px))`,
+        }}
+      >
+        <AggregateKeyframeDot editorProps={props} utils={utils} />
+        <AggregateKeyframeConnector editorProps={props} utils={utils} />
+      </AggregateKeyframeEditorContainer>
+    )
+  })
 
 export default AggregateKeyframeEditor