Hotfix for the aggregate tracks not getting updated on changes

Co-authored-by: Fülöp <fulopkovacs@users.noreply.github.com>

packages/react/src/index.ts

@@ -42,10 +42,14 @@ function useForceUpdate(debugLabel?: string) {
  * whenever there's a change in the values of the dependency array, or in the
  * derivations that are used within the callback function.
  *
- *
  * @param fn - The callback function
  * @param deps - The dependency array
  * @param debugLabel - The label used by the debugger
+ *
+ * @remarks
+ *
+ * A common mistake with `usePrism()` is not including its deps in its dependency array. Let's
+ * have an eslint rule to catch that.
  */
 export function usePrism<T>(
   fn: () => T,

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor.tsx

@@ -164,9 +164,10 @@ function useAggregateKeyframeEditorUtils(
     'index' | 'aggregateKeyframes' | 'selection' | 'viewModel'
   >,
 ) {
-  return usePrism(() => {
-    const {index, aggregateKeyframes} = props
+  const {index, aggregateKeyframes, selection} = props
+  const sheetObjectAddress = props.viewModel.sheetObject.address
 
+  return usePrism(() => {
     const cur = aggregateKeyframes[index]
     const next = aggregateKeyframes[index + 1]
 
@@ -187,24 +188,24 @@ function useAggregateKeyframeEditorUtils(
     const aggregatedConnections: AggregatedKeyframeConnection[] = !connected
       ? []
       : cur.keyframes.map(({kf, track}, i) => ({
-          ...props.viewModel.sheetObject.address,
+          ...sheetObjectAddress,
           trackId: track.id,
           left: kf,
           right: next.keyframes[i].kf,
         }))
 
-    const {projectId, sheetId} = props.viewModel.sheetObject.address
+    const {projectId, sheetId} = sheetObjectAddress
 
     const selectedConnections = prism
       .memo(
         'selectedConnections',
         () =>
           selectedKeyframeConnections(
-            props.viewModel.sheetObject.address.projectId,
-            props.viewModel.sheetObject.address.sheetId,
-            props.selection,
+            sheetObjectAddress.projectId,
+            sheetObjectAddress.sheetId,
+            selection,
           ),
-        [projectId, sheetId, props.selection],
+        [projectId, sheetId, selection],
       )
       .getValue()
 
@@ -215,7 +216,7 @@ function useAggregateKeyframeEditorUtils(
     )
 
     return {cur, connected, isAggregateEditingInCurvePopover, allConnections}
-  }, [])
+  }, [index, aggregateKeyframes, selection, sheetObjectAddress])
 }
 
 const AggregateCurveEditorPopover: React.FC<

theatre/studio/src/refreshEvery.tsx

@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react'
+
+/**
+ * Little utility hook that refreshes a react element every `ms` milliseconds. Use
+ * it to debug whether the props of the element, or the return values of its hooks
+ * are getting properly updated.
+ *
+ * @param ms - interval in milliseconds
+ */
+export default function useDebugRefreshEvery(ms: number = 500) {
+  const [_, setState] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setState((i) => i + 1)
+    }, ms)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+}