Skip to content

useFps

Returns a ReadonlyObservable<number> that tracks the current frames-per-second, sampled every N frames to reduce noise.

Demo

FPS:0
Sampled every 10 frames using requestAnimationFrame.

Usage

import { 
import useFps
useFps } from "@usels/web";

const 
const fps: any
fps = 
import useFps
useFps();
// fps.get() → current FPS (0 until first sample)

Custom sampling rate

import { 
import useFps
useFps } from "@usels/web";

const 
const fps: any
fps = 
import useFps
useFps({ 
every: number
every: 20 }); // sample every 20 frames (~333ms at 60fps)

Notes

Initial value

fps starts at 0 and updates only after the first every frames have elapsed.

Sampling formula

fps = round(1000 / (elapsed_ms / frame_count))

At 60fps with every=10, each sample covers ~166ms and yields ~60.

`every` is mount-time-only

The sampling period is fixed at mount. Changing every dynamically has no effect.

Type Declarations

export interface UseFpsOptions {
    every?: number;
}
export declare function useFps(options?: DeepMaybeObservable<UseFpsOptions>): ReadonlyObservable<number>;

Source

Contributors

tigerwest

Changelog

a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)