useAnimationFrame.ts

import { useCallback, useEffect, useRef } from 'react';

/**
 * Hook that provides start and stop functions to handle AnimationFrame API.
 */
const useAnimationFrame = () => {
  const handleRef = useRef<null | number>(null);

  const stop = useCallback(() => {
    if (!handleRef.current) return;

    window.cancelAnimationFrame(handleRef.current);
    handleRef.current = null;
  }, [handleRef]);

  const start = useCallback(
    (callback: () => void) => {
      const run = () => {
        callback();
        handleRef.current = window.requestAnimationFrame(run);
      };

      handleRef.current = window.requestAnimationFrame(run);
    },
    [handleRef]
  );

  useEffect(() => stop, [handleRef]);

  return {
    stop,
    start
  };
};

export default useAnimationFrame;