use-latency is a 900 byte React hook around the Event Timing API. It tells you which interactions were slow for a real visitor, and which component was under their finger at the time.

Usage

import { useLatency } from "use-latency"

export function App() {
  useLatency({
    over: 200,
    report: (entry) => send("/vitals", entry),
  })
  return <Routes />
}

What you get

• entry.duration in milliseconds, measured from input to the next paint
• entry.target as a short selector, and the nearest component name in development
• entry.kind: pointer, keyboard or drag

Why it exists

It started as a debugging script on a payments dashboard. Lab tools said the table was fine; the people using it said it was not. The hook proved them right in an afternoon.

No dependencies. It does nothing at all in browsers without the Event Timing API.