usePerformanceObserver

v0.0.14testeddemo

Observe performance metrics via PerformanceObserver. The observer is (re)created only when activation changes, and can be paused, resumed, or permanently stopped. SSR-safe: nothing runs until mounted in a supporting environment.

Source Tests

Examples

usePerformanceObserver((list) => {
  console.log(list.getEntries());
}, { entryTypes: ['paint', 'measure'] });

const { pause, resume } = usePerformanceObserver(onEntries, {
  entryTypes: ['longtask'],
  buffered: true,
});

Demo

Loading demo…

Signature

export function usePerformanceObserver(
  callback: PerformanceObserverCallback,
  options: UsePerformanceObserverOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`callback`	`PerformanceObserverCallback`	—	Invoked with the observed entries and observer
`options`?	`UsePerformanceObserverOptions`	`{}`	Observer init (`entryTypes`/`type`/`buffered`) plus `immediate`

Returns

UsePerformanceObserverReturnisSupported, isActive, pause, resume, stop, and takeRecords

Property	Type	Default	Description
`isSupported`	`Readonly<Ref<boolean>>`	—	Whether `PerformanceObserver` is supported in the current environment
`isActive`	`Readonly<Ref<boolean>>`	—	Whether the observer is currently active
`resume`	`() => void`	—	Resume observing after a `pause`
`pause`	`() => void`	—	Temporarily stop observing (disconnects the observer) while keeping the activation watcher alive, so observing can be resumed later
`stop`	`() => void`	—	Permanently stop observing and tear down the activation watcher
`takeRecords`	`() => PerformanceEntryList \| undefined`	—	Synchronously return the current list of buffered performance entries and clear the observer's buffer. Returns `undefined` when not observing.