useAnimationFrame.ts

import { useLayoutEffect } from 'react';
import { duration } from 'dayjs';
import { type Duration } from 'dayjs/plugin/duration';

export function useAnimationFrame(callback: (deltaTime: Duration) => void): void {
  useLayoutEffect(() => {
    let requestID: number;
    let previousTime = 0;

    const tick = (time: number) => {
      const deltaTime = duration(time - previousTime, 'milliseconds');
      callback(deltaTime);

      previousTime = time;
      requestID = requestAnimationFrame(tick);
    };

    requestID = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(requestID);
  }, [callback]);
}