React hook for requestAnimation Frame

useAnimationFrame.js

/* Usage:

import { useState } from 'react';
import useAnimationFrame from '../../hooks/useAnimationFrame';
const [animationActive, setAnimationActive] = useState(true);
useAnimationFrame(() => {
  //perform action here
}, animationActive);

*/
import { useRef, useEffect, useCallback } from 'react';
function useAnimationFrame(exec, active) {
   const savedExec = useRef();
   const interval = useRef();
   useEffect(() => {
      savedExec.current = exec;
   }, [exec]);

   const step = useCallback(() => {
      savedExec.current();
      if (interval.current) {
         requestAnimationFrame(step);
      }
   });

   const cancel = useCallback(() => {
      cancelAnimationFrame(interval.current);
      interval.current = null;
   });

   useEffect(() => {
      if (active) {
         interval.current = requestAnimationFrame(step);
      }
      return () => cancel();
   }, [active]);
}

export default useAnimationFrame;

Every animation function needs to know the elapsed time to determine the progress of the animation. so:

import { useRef, useEffect, useCallback } from 'react';
function useAnimationFrame(exec, active) {
   const savedExec = useRef();
   const interval = useRef();
   useEffect(() => {
      savedExec.current = exec;
   }, [exec]);

   const step = useCallback((timestamp) => {
      savedExec.current(timestamp);
      if (interval.current) {
         requestAnimationFrame(step);
      }
   });

   const cancel = useCallback(() => {
      cancelAnimationFrame(interval.current);
      interval.current = null;
   });

   useEffect(() => {
      if (active) {
         interval.current = requestAnimationFrame(step);
      }
      return () => cancel();
   }, [active]);
}

export default useAnimationFrame;