Perf: memoize AggregateKeyframeEditor

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> = (
+const AggregateKeyframeEditor: React.VFC<IAggregateKeyframeEditorProps> =
-  props,
+  React.memo((props) => {
-) => {
+    const utils = useAggregateKeyframeEditorUtils(props)
-  const utils = useAggregateKeyframeEditorUtils(props)
+    return (
-
+      <AggregateKeyframeEditorContainer
-  return (
+        style={{
-    <AggregateKeyframeEditorContainer
+          top: `${props.viewModel.nodeHeight / 2}px`,
-      style={{
+          left: `calc(${val(
-        top: `${props.viewModel.nodeHeight / 2}px`,
+            props.layoutP.scaledSpace.leftPadding,
-        left: `calc(${val(
+          )}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${
-          props.layoutP.scaledSpace.leftPadding,
+            utils.cur.position
-        )}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${
+          }px))`,
-          utils.cur.position
+        }}
-        }px))`,
+      >
-      }}
+        <AggregateKeyframeDot editorProps={props} utils={utils} />
-    >
+        <AggregateKeyframeConnector editorProps={props} utils={utils} />
-      <AggregateKeyframeDot editorProps={props} utils={utils} />
+      </AggregateKeyframeEditorContainer>
-      <AggregateKeyframeConnector editorProps={props} utils={utils} />
+    )
-    </AggregateKeyframeEditorContainer>
+  })
-  )
-}
 
 export default AggregateKeyframeEditor