useAnimationFrame React Hook, for requestAnimationFrame, with Delta Time and no re-rendering. Uses useLayoutEffect so it can be used before the canvas has been rendered to screen,

useAnimationFrame.js

import { useState, useRef, useLayoutEffect } from "react";

const useAnimationFrame = (callback) => {
  const callbackRef = useRef(callback);
  const frameRef = useRef();
  const timerRef = useRef();

  useLayoutEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useLayoutEffect(() => {
    const loop = (time) => {
      frameRef.current = requestAnimationFrame(loop);

      let dt = 0;
      if (timerRef.current !== undefined && timerRef.current !== null)
        dt = time - timerRef.current;

      const callback = callbackRef.current;
      callback(dt/1000);

      timerRef.current = time;
    };

    frameRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(frameRef.current);
  }, []);
};