Handle requestAnimationFrame with react hook

use-animation-frame.js

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

/** @param {() => unknown} callback */
export default function useAnimationFrame(callback, initial = false) {
  const handlerRef = useRef(callback)
  const [started, setStarted] = useState(initial)

  useEffect(() => {
    handlerRef.current = callback
  }, [callback])

  useEffect(() => {
    let handle = null
    let timer = null

    const loop = () => {
      if (!started) return
      // eslint-disable-next-line no-unused-expressions
      handlerRef.current?.()
      timer = setTimeout(() => {
        handle = requestAnimationFrame(() => loop())
      }, 40)
    }

    handle = requestAnimationFrame(() => loop())

    return () => {
      cancelAnimationFrame(handle)
      clearTimeout(timer)
      if (started) setStarted(false)
    }
  }, [started])

  const dispose = useCallback(() => setStarted(false), [])
  const resume = useCallback(() => setStarted(true), [])

  return { dispose, resume }
}