Perf: Memoize SingleKeyframeEditor

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx

@@ -95,44 +95,46 @@ const HitZone = styled.div<{isInlineEditorPopoverOpen: boolean}>`
 type ISingleKeyframeDotProps = ISingleKeyframeEditorProps
 
 /** The ◆ you can grab onto in "keyframe editor" (aka "dope sheet" in other programs) */
-const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
-  const logger = useLogger('SingleKeyframeDot', props.keyframe.id)
-  const presence = usePresence(props.itemKey)
-  const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
+const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = React.memo(
+  (props) => {
+    const logger = useLogger('SingleKeyframeDot', props.keyframe.id)
+    const presence = usePresence(props.itemKey)
+    const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
 
-  const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
-  const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
-    useSingleKeyframeInlineEditorPopover({
-      keyframe: props.keyframe,
-      pathToProp: props.leaf.pathToProp,
-      propConf: props.leaf.propConf,
-      sheetObject: props.leaf.sheetObject,
-      trackId: props.leaf.trackId,
+    const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
+    const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
+      useSingleKeyframeInlineEditorPopover({
+        keyframe: props.keyframe,
+        pathToProp: props.leaf.pathToProp,
+        propConf: props.leaf.propConf,
+        sheetObject: props.leaf.sheetObject,
+        trackId: props.leaf.trackId,
+      })
+
+    const [isDragging] = useDragForSingleKeyframeDot(node, props, {
+      onClickFromDrag(dragStartEvent) {
+        openEditor(dragStartEvent, ref.current!)
+      },
     })
 
-  const [isDragging] = useDragForSingleKeyframeDot(node, props, {
-    onClickFromDrag(dragStartEvent) {
-      openEditor(dragStartEvent, ref.current!)
-    },
-  })
-
-  return (
-    <>
-      <HitZone
-        ref={ref}
-        isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
-        {...presence.attrs}
-      />
-      <Diamond
-        isSelected={!!props.selection}
-        isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
-        flag={presence.flag}
-      />
-      {inlineEditorPopover}
-      {contextMenu}
-    </>
-  )
-}
+    return (
+      <>
+        <HitZone
+          ref={ref}
+          isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
+          {...presence.attrs}
+        />
+        <Diamond
+          isSelected={!!props.selection}
+          isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
+          flag={presence.flag}
+        />
+        {inlineEditorPopover}
+        {contextMenu}
+      </>
+    )
+  },
+)
 
 export default SingleKeyframeDot
 

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeEditor.tsx

@@ -29,32 +29,34 @@ export type ISingleKeyframeEditorProps = {
   selection: undefined | DopeSheetSelection
 }
 
-const SingleKeyframeEditor: React.VFC<ISingleKeyframeEditorProps> = (props) => {
-  const {
-    index,
-    keyframe,
-    track: {data: trackData},
-  } = props
-  const cur = trackData.keyframes[index]
-  const next = trackData.keyframes[index + 1]
+const SingleKeyframeEditor: React.VFC<ISingleKeyframeEditorProps> = React.memo(
+  (props) => {
+    const {
+      index,
+      keyframe,
+      track: {data: trackData},
+    } = props
+    const cur = trackData.keyframes[index]
+    const next = trackData.keyframes[index + 1]
 
-  const connected = cur.connectedRight && !!next
+    const connected = cur.connectedRight && !!next
 
-  return (
-    <SingleKeyframeEditorContainer
-      style={{
-        top: `${props.leaf.nodeHeight / 2}px`,
-        left: `calc(${val(
-          props.layoutP.scaledSpace.leftPadding,
-        )}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${
-          cur.position
-        }px))`,
-      }}
-    >
-      <SingleKeyframeDot {...props} itemKey={props.itemKey} />
-      {connected ? <SingleKeyframeConnector {...props} /> : noConnector}
-    </SingleKeyframeEditorContainer>
-  )
-}
+    return (
+      <SingleKeyframeEditorContainer
+        style={{
+          top: `${props.leaf.nodeHeight / 2}px`,
+          left: `calc(${val(
+            props.layoutP.scaledSpace.leftPadding,
+          )}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${
+            cur.position
+          }px))`,
+        }}
+      >
+        <SingleKeyframeDot {...props} itemKey={props.itemKey} />
+        {connected ? <SingleKeyframeConnector {...props} /> : noConnector}
+      </SingleKeyframeEditorContainer>
+    )
+  },
+)
 
 export default SingleKeyframeEditor