React useAnimationFrame hook

useAnimationFrame.ts

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

const useAnimationFrame = (
  tick: (dt: number, elapsed: number, frame: number) => void
) => {
  const tickRef = useRef(tick)
  const requestRef = useRef(0)
  const prevTimeRef = useRef(0)
  const elapsedRef = useRef(0)
  const frameRef = useRef(0)

  const animate = useCallback((time: number) => {
    requestRef.current = requestAnimationFrame(animate)

    if (prevTimeRef.current !== 0) {
      const dt = (time - prevTimeRef.current) / 1000
      elapsedRef.current += dt

      tickRef.current(dt, elapsedRef.current, ++frameRef.current)
    }

    prevTimeRef.current = time
  }, [])

  useEffect(() => {
    tickRef.current = tick
  }, [tick])

  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate)
    return () => cancelAnimationFrame(requestRef.current)
  }, [animate])
}

export default useAnimationFrame