2 files changed, 12 insertions, 22 deletions

diff --git a/apps/web/src/timeline/hooks/element/use-element-interaction.ts b/apps/web/src/timeline/hooks/element/use-element-interaction.ts
index 26a21f85..220f3fec 100644
--- a/apps/web/src/timeline/hooks/element/use-element-interaction.ts
+++ b/apps/web/src/timeline/hooks/element/use-element-interaction.ts
@@ -1,5 +1,6 @@
-import { useEffect, useReducer, useRef, type RefObject } from "react";
+import { useEffect, useReducer, useState, type RefObject } from "react";
 import { useEditor } from "@/editor/use-editor";
+import { useCommittedRef } from "@/hooks/use-committed-ref";
 import { useShiftKey } from "@/hooks/use-shift-key";
 import { useElementSelection } from "@/timeline/hooks/element/use-element-selection";
 import { registerCanceller } from "@/editor/cancel-interaction";
@@ -63,17 +64,10 @@ export function useElementInteraction({
 			onChange: onSnapPointChange,
 		},
 	};
-
-	const depsRef = useRef<ElementInteractionDeps>(deps);
-	depsRef.current = deps;
-
-	const controllerRef = useRef<ElementInteractionController | null>(null);
-	if (!controllerRef.current) {
-		controllerRef.current = new ElementInteractionController({
-			depsRef: depsRef as ElementInteractionDepsRef,
-		});
-	}
-	const controller = controllerRef.current;
+	const depsRef = useCommittedRef(deps) as ElementInteractionDepsRef;
+	const [controller] = useState(
+		() => new ElementInteractionController({ depsRef }),
+	);
 
 	const [, rerender] = useReducer((n: number) => n + 1, 0);
 	useEffect(() => controller.subscribe(rerender), [controller]);
diff --git a/apps/web/src/timeline/hooks/element/use-keyframe-drag.ts b/apps/web/src/timeline/hooks/element/use-keyframe-drag.ts
index ea03cb5c..141bba8f 100644
--- a/apps/web/src/timeline/hooks/element/use-keyframe-drag.ts
+++ b/apps/web/src/timeline/hooks/element/use-keyframe-drag.ts
@@ -1,5 +1,6 @@
-import { useEffect, useReducer, useRef } from "react";
+import { useEffect, useReducer, useState } from "react";
 import { useEditor } from "@/editor/use-editor";
+import { useCommittedRef } from "@/hooks/use-committed-ref";
 import { useKeyframeSelection } from "./use-keyframe-selection";
 import { registerCanceller } from "@/editor/cancel-interaction";
 import {
@@ -44,15 +45,10 @@ export function useKeyframeDrag({
 		seek: ({ time }) => editor.playback.seek({ time }),
 		getTotalDuration: () => editor.timeline.getTotalDuration(),
 	};
-
-	const configRef = useRef<KeyframeDragConfig>(config);
-	configRef.current = config;
-
-	const controllerRef = useRef<KeyframeDragController | null>(null);
-	if (!controllerRef.current) {
-		controllerRef.current = new KeyframeDragController({ configRef });
-	}
-	const controller = controllerRef.current;
+	const configRef = useCommittedRef(config);
+	const [controller] = useState(
+		() => new KeyframeDragController({ configRef }),
+	);
 
 	const [, rerender] = useReducer((n: number) => n + 1, 0);
 	useEffect(() => controller.subscribe(rerender), [controller]);