react-use/src/useRafLoop.ts

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

export type RafLoopReturns = [() => void, () => void, () => boolean];

export default function useRafLoop(callback: FrameRequestCallback, initiallyActive = true): RafLoopReturns {
  const raf = useRef<number | null>(null);
  const rafActivity = useRef<boolean>(false);
  const rafCallback = useRef(callback);
  rafCallback.current = callback;

  const step = useCallback((time: number) => {
    if (rafActivity.current) {
      rafCallback.current(time);
      raf.current = requestAnimationFrame(step);
    }
  }, []);

  const result = useMemo(() => ([
    () => { // stop
      if (rafActivity.current) {
        rafActivity.current = false;
        raf.current && cancelAnimationFrame(raf.current);
      }
    },
    () => { // start
      if (!rafActivity.current) {
        rafActivity.current = true;
        raf.current = requestAnimationFrame(step);
      }
    },
    (): boolean => rafActivity.current  // isActive
    // eslint-disable-next-line react-hooks/exhaustive-deps
  ] as RafLoopReturns), []);

  useEffect(() => {
    if (initiallyActive) {
      result[1]();
    }

    return result[0];
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return result;
}