use-fps

1import { useEffect, useRef, useState } from 'react'
2import { isBrowser } from '@/registry/lib/is-browser'
3 
4export interface UseFpsProps {
5  /**
6   * Calculate the FPS on every x frames.
7   * @default 10
8   */
9  every?: number
10}
11 
12export function useFps(options?: UseFpsProps) {
13  const { every = 10 } = options ?? {}
14  const [fps, setFps] = useState<number>(0)
15  const frameRef = useRef<number | null>(null)
16 
17  useEffect(() => {
18    if (
19      !isBrowser ||
20      typeof performance === 'undefined' ||
21      typeof requestAnimationFrame === 'undefined'
22    ) {
23      return
24    }
25 
26    let frameCount = 0
27    let lastFpsUpdate = performance.now()
28 
29    const measureFps = () => {
30      const now = performance.now()
31      frameCount++
32 
33      // Update FPS every x frames
34      if (frameCount >= every) {
35        const timeDiff = now - lastFpsUpdate
36        // Avoid division by zero or very small numbers
37        const currentFps =
38          timeDiff > 0 ? Math.round((frameCount * 1000) / timeDiff) : 0
39        setFps(currentFps)
40        frameCount = 0
41        lastFpsUpdate = now
42      }
43 
44      frameRef.current = requestAnimationFrame(measureFps)
45    }
46 
47    frameRef.current = requestAnimationFrame(measureFps)
48 
49    return () => {
50      if (frameRef.current) {
51        cancelAnimationFrame(frameRef.current)
52      }
53    }
54  }, [every])
55 
56  return fps
57}