useMeasureFPS

Track your app’s frames-per-second (FPS) in real-time.

✅ Features

  • Real-time FPS calculations
  • Useful for animation-heavy or performance-critical apps
  • Clean and unobtrusive

📦 Usage

1import { useMeasureFPS } from './useMeasureFPS';
2
3const fps = useMeasureFPS();
4
5return <div>FPS: {fps}</div>;

📋 Source Code

This is the full implementation of useMeasureFPS

1import { useEffect, useRef, useState } from 'react';
2
3export function useMeasureFPS(): number {
4  const [fps, setFps] = useState(0);
5  const frameCount = useRef(0);
6  const lastTime = useRef(performance.now());
7
8  useEffect(() => {
9    const loop = () => {
10      const now = performance.now();
11      const delta = now - lastTime.current;
12      frameCount.current++;
13
14      if (delta >= 1000) {
15        setFps(frameCount.current);
16        frameCount.current = 0;
17        lastTime.current = now;
18      }
19
20      requestAnimationFrame(loop);
21    };
22
23    loop();
24  }, []);
25
26  return fps;
27}
28