From de98f6ace31a629c96139fef992ac804ff634aaa Mon Sep 17 00:00:00 2001
From: Leroy Korterink <leroy@mediamonks.com>
Date: Mon, 15 May 2023 18:35:32 +0200
Subject: [PATCH] Add delta time to test implementation in storybook

---
 .../useAnimationLoop/useAnimationLoop.stories.tsx | 13 ++++++++++---
 src/hooks/useAnimationLoop/useAnimationLoop.ts    | 15 +++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useAnimationLoop/useAnimationLoop.stories.tsx b/src/hooks/useAnimationLoop/useAnimationLoop.stories.tsx
index 1378881..06a2770 100644
--- a/src/hooks/useAnimationLoop/useAnimationLoop.stories.tsx
+++ b/src/hooks/useAnimationLoop/useAnimationLoop.stories.tsx
@@ -9,10 +9,16 @@ export default {
 };
 
 function DemoComponent(): ReactElement {
-  const [currentTimestamp, setCurrentTimestamp] = useState(Date.now);
+  const [delta, setDelta] = useState(0);
+  const [currentTimestamp, setCurrentTimestamp] = useState(0);
+
   const [isRunning, toggleIsRunning] = useToggle(true);
+
   useAnimationLoop(() => {
-    setCurrentTimestamp(Date.now);
+    const timestamp = Date.now();
+
+    setDelta(timestamp - currentTimestamp);
+    setCurrentTimestamp(timestamp);
   }, isRunning);
 
   return (
@@ -24,7 +30,8 @@ function DemoComponent(): ReactElement {
       <div className="card border-dark" data-ref="test-area">
         <div className="card-header">Test Area</div>
         <div className="card-body">
-          <p>{currentTimestamp}</p>
+          <p>Current time: {currentTimestamp}</p>
+          <p>Delta: {delta}</p>
 
           <button
             type="button"
diff --git a/src/hooks/useAnimationLoop/useAnimationLoop.ts b/src/hooks/useAnimationLoop/useAnimationLoop.ts
index fddd1e9..551916d 100644
--- a/src/hooks/useAnimationLoop/useAnimationLoop.ts
+++ b/src/hooks/useAnimationLoop/useAnimationLoop.ts
@@ -13,14 +13,17 @@ export function useAnimationLoop(callback: (delta: number) => void, enabled = fa
   const lastTimeRef = useRef(0);
   const callbackRef = useRefValue(callback);
 
-  const tick = useCallback((time: number): void => {
-    const delta = time - lastTimeRef.current;
-    lastTimeRef.current = time;
+  const tick = useCallback(
+    (time: number): void => {
+      const delta = time - lastTimeRef.current;
+      lastTimeRef.current = time;
 
-    callbackRef.current?.(delta);
+      callbackRef.current?.(delta);
 
-    animationFrameRef.current = requestAnimationFrame(tick);
-  }, []);
+      animationFrameRef.current = requestAnimationFrame(tick);
+    },
+    [callbackRef],
+  );
 
   const play = useCallback(() => {
     lastTimeRef.current = performance.now();