React - Frame/Game loop using requestAnimationFrame

Example.tsx

import React, { useEffect, useRef } from "react"
import useLoop from "../hooks/useLoop"
import playerInput from "../utils/playerInput"

type Props = {
}

const Gamepad = ({ }: Props) => {
  // The frame/game loop
  // We run this 60fps (max) to sync gamepad input to Input class/store
  useLoop(() => {
    playerInput()
  })

  return <></>
}

export default Gamepad

useLoop.tsx

import { useEffect, useState } from "react"

const useLoop = (callback: (time: DOMHighResTimeStamp) => void) => {
    const [frameTime, setFrameTime] = useState<DOMHighResTimeStamp>()

    useEffect(() => {
        let animationCallback: number;
        
        const animationLoop = (time: DOMHighResTimeStamp) => {
            setFrameTime(time);

            //Run our callback
            callback(time);
            
            // Here's where we "loop" infinitely
            animationCallback = requestAnimationFrame(animationLoop)
        }

        requestAnimationFrame(animationLoop)

        return () => {
            cancelAnimationFrame(animationCallback);
        }
    }, [])
    
    return frameTime;
}

export default useLoop;