Perf: first-pass at reducing number of re-renders in <NextPrevKeyframeCursors>

theatre/studio/src/propEditors/useEditingToolsForCompoundProp.tsx

@@ -185,14 +185,56 @@ export function useEditingToolsForCompoundProp<T extends SerializablePrimitive>(
     }
 
     if (hasOneOrMoreSequencedTracks) {
-      const sequenceTrackId = possibleSequenceTrackIds
-      const nearbyKeyframeControls = prism.sub(
-        'lcr',
-        (): NearbyKeyframesControls => {
-          const sequencePosition = val(
-            obj.sheet.getSequence().positionDerivation,
+      const controlIndicators = prism.memo(
+        `controlIndicators`,
+        () => (
+          <ControlIndicators
+            {...{
+              pointerToProp,
+              obj,
+              possibleSequenceTrackIds,
+              listOfDescendantTrackIds,
+            }}
+          />
+        ),
+        [possibleSequenceTrackIds, listOfDescendantTrackIds],
       )
 
+      const ret: HasSequences = {
+        ...common,
+        type: 'HasSequences',
+        controlIndicators,
+      }
+
+      return ret
+    } else {
+      return {
+        ...common,
+        type: 'AllStatic',
+        controlIndicators: (
+          <DefaultOrStaticValueIndicator hasStaticOverride={false} />
+        ),
+      }
+    }
+  }, [])
+}
+
+function ControlIndicators({
+  pointerToProp,
+  obj,
+  possibleSequenceTrackIds,
+  listOfDescendantTrackIds,
+}: {
+  pointerToProp: Pointer<{}>
+  obj: SheetObject
+  possibleSequenceTrackIds: IPropPathToTrackIdTree
+  listOfDescendantTrackIds: SequenceTrackId[]
+}) {
+  return usePrism(() => {
+    const pathToProp = getPointerParts(pointerToProp).path
+
+    const sequencePosition = val(obj.sheet.getSequence().positionDerivation)
+
     /*
     2/10 perf concern:
     When displaying a hierarchy like {props: {transform: {position: {x, y, z}}}},
@@ -204,11 +246,8 @@ export function useEditingToolsForCompoundProp<T extends SerializablePrimitive>(
       .map((trackId) => ({
         trackId,
         track: val(
-                obj.template.project.pointers.historic.sheetsById[
-                  obj.address.sheetId
-                ].sequence.tracksByObject[obj.address.objectKey].trackData[
-                  trackId
-                ],
+          obj.template.project.pointers.historic.sheetsById[obj.address.sheetId]
+            .sequence.tracksByObject[obj.address.objectKey].trackData[trackId],
         ),
       }))
       .filter(({track}) => !!track)
@@ -277,12 +316,12 @@ export function useEditingToolsForCompoundProp<T extends SerializablePrimitive>(
         })
       }
     }
-          return {
+
+    const pr: NearbyKeyframesControls = {
       cur: hasCur
         ? {
             type: 'on',
-                  itemKey:
-                    createStudioSheetItemKey.forCompoundPropAggregateKeyframe(
+            itemKey: createStudioSheetItemKey.forCompoundPropAggregateKeyframe(
               obj,
               pathToProp,
               sequencePosition,
@@ -324,29 +363,7 @@ export function useEditingToolsForCompoundProp<T extends SerializablePrimitive>(
             }
           : undefined,
     }
-        },
-        [sequenceTrackId],
-      )
 
-      const nextPrevKeyframeCursors = (
-        <NextPrevKeyframeCursors {...nearbyKeyframeControls} />
-      )
-
-      const ret: HasSequences = {
-        ...common,
-        type: 'HasSequences',
-        controlIndicators: nextPrevKeyframeCursors,
-      }
-
-      return ret
-    } else {
-      return {
-        ...common,
-        type: 'AllStatic',
-        controlIndicators: (
-          <DefaultOrStaticValueIndicator hasStaticOverride={false} />
-        ),
-      }
-    }
-  }, [])
+    return <NextPrevKeyframeCursors {...pr} />
+  }, [pointerToProp, obj, possibleSequenceTrackIds, listOfDescendantTrackIds])
 }