useFPS

Hook to detect FPS (Frames per second).

Demo

INFO

The component uses useFPS hook to compute FPS and shows details on screen.

Loading demo…

Show source code

import { useFPS } from "../../../.."

export const UseFPS = () => {
	const fps = useFPS();
	return <p>FPS: {fps.currentFps} - avg: {fps.avg} - Max FPS: {fps.maxFps}</p>
}

Types

UseFPSProps

Props for the useFPS.

Property	Type	Required	Description
everySeconds	number	✓	Sampling interval in seconds. The hook records one FPS measurement per interval and updates the result accordingly.
windowSize	number	✓	Number of measurements to keep in the rolling window for average/max calculations. Older measurements are dropped once the window is full.

UseFPSResult

Result object returned by useFPS.

Property	Type	Required	Description
fps	number[]	✓	Rolling array of recent FPS measurements (up to windowSize entries). Each value is the frames-per-second recorded during the corresponding sampling interval.
avg	number	✓	Average FPS over all measurements currently in the rolling window.
maxFps	number	✓	Highest FPS value recorded in the rolling window.
currentFps	number	✓	Most recently recorded FPS value.