useFps

Reactive frames-per-second counter using requestAnimationFrame

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

Demo

FPS Monitor

Sampled every 10 frames using requestAnimationFrame.

FPS

0

Usage

Hook

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

function Component() {
  const fps = useFps();
  return <div>{fps.get()}</div>;
  // fps.get() → current FPS (0 until first sample)
}

Scope

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

function Component() {
  "use scope"
  const { fps$ } = createFps();
  return <div>{fps$.get()}</div>;
  // fps$.get() → current FPS (0 until first sample)
}

Custom sampling rate

Hook

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

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

Scope

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

function Component() {
  "use scope"
  const { fps$ } = createFps({ 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

export { createFps } from "./core";
export type { FpsOptions } from "./core";
export type UseFpsOptions = Pick<FpsOptions, "every">;
export declare function useFps(options?: DeepMaybeObservable<UseFpsOptions>): ReadonlyObservable<number>;

Source

View on GitHub