Benchmarks – Performance Numbers

Methodology

We measure two things:

1. Re-render throughput — How many visibility toggles per second each approach can handle
2. Listener overhead — Mount/unmount cost compared to a raw useEffect implementation

All benchmarks use @testing-library/react with renderHook and act to simulate real React rendering inside a jsdom environment.

Results

Numbers from a single run (Node 22, jsdom, single-threaded). Your mileage may vary — run locally for your machine.

useDocVisible vs raw useEffect

Metric	Raw useEffect	useDocVisible	Overhead
Toggles/sec	~80,000	~98,000	≈ 0%
Avg toggle latency (ms)	~0.012	~0.010	≈ 0%
Mount/unmount (1k cycles)	~110 ms	~91 ms	≈ 0%

useDocVisible adds a useCallback wrapper for the event handler. In practice this has no measurable overhead — results are within noise of a raw implementation.

useIdleVisibility vs raw useEffect

Metric	Raw useEffect	useIdleVisibility	Overhead
Toggles/sec	~116,000	~75,000	~55%
Mount/unmount (1k cycles)	~91 ms	~95 ms	~5%

useIdleVisibility registers 5 additional event listeners (mousemove, keydown, pointerdown, scroll, touchstart) plus a timeout. The mount/unmount overhead is ~5%. The toggle throughput difference reflects the extra idle-detection logic running on each visibility change.

Key takeaways

• useDocVisible has essentially zero overhead vs hand-written useEffect
• useIdleVisibility listener registration is ~5% slower, which is expected given the extra event listeners
• All hooks are well under 1ms per operation — no perceptible impact on real applications

Run locally

npm run bench

Or directly:

npx tsx benchmarks/rerenders.bench.ts