React Use Animation Frame Hook

use-animation-frame.ts

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

const raf =
    typeof window !== 'undefined'
        ? window.requestAnimationFrame ||
          ((cb: FrameRequestCallback) => window.setTimeout(() => cb(Date.now()), 1_000 / 60))
        : () => undefined;

const caf = typeof window !== 'undefined' ? window.cancelAnimationFrame || window.clearTimeout : () => undefined;

export function useAnimationFrame(callback: FrameRequestCallback, deps: DependencyList = []) {
    const requestRef = useRef<number | undefined>(undefined);

    const previousTimeRef = useRef<number | undefined>(undefined);

    // eslint-disable-next-line react-hooks/exhaustive-deps
    const callbackFunction = useCallback(callback, deps);

    const animate = useCallback(
        (time: number) => {
            if (previousTimeRef.current !== undefined) {
                const deltaTime = time - previousTimeRef.current;

                callbackFunction(deltaTime);
            }

            previousTimeRef.current = time;

            requestRef.current = raf(animate);
        },
        [callbackFunction],
    );

    useEffect(() => {
        requestRef.current = raf(animate);

        return () => {
            if (requestRef.current !== undefined) {
                caf(requestRef.current);
            }
        };
    }, [animate]);
}