react-render-pulseRender timings from real users, per component

Wrap the parts of your React tree you care about and see how long they take to render on your users' devices, not just your laptop.

Get started

Overhead and bundle size

Component level

Name areas with the RenderMonitor component or the useRenderMonitor hook. Reports show render counts, slow renders, p50/p75/p95 and the slowest renders for each area and route.

Two measurement modes

Lightweight mode works with any production build. Profiling mode uses React's profiling build for exact per-subtree timings. Auto mode picks the right one.

Small and safe

The client is under 3.75 kB brotli and adds about 10–15 µs per measured render in lightweight mode. It batches data in memory, sends it when the page is hidden, and never lets its own errors reach your app.

Privacy by design

No user IDs, IP addresses, page text, input values or query strings. The session id is random per page load and never stored.

Your own backend

A standard Request-to-Response collector for Vercel, Netlify, Cloudflare Workers or Node, with Postgres and JSON-file storage.

Reports you can act on

A CLI report and a local web viewer list the slowest areas, routes, device classes, and trends by day and app version.

Quick start

bash

npm install react-render-pulse

tsx

import { createRoot } from "react-dom/client";
import { initRenderPulse, RenderMonitor } from "react-render-pulse";
import { OrdersTable } from "./OrdersTable";

initRenderPulse({ endpoint: "/api/render-pulse", sampleRate: 0.1 });

createRoot(document.getElementById("root")!).render(
  <RenderMonitor id="orders-table">
    <OrdersTable />
  </RenderMonitor>,
);

Without an endpoint, each batch is logged to the browser console instead, which is the quickest way to try it. Then deploy a collector and read the reports.

The viewer

The web viewer: summary tiles, p75 render time by day and by app version, and the slowest areas table — The web viewer, showing synthetic demo data.

The web viewer in dark mode — The web viewer, showing synthetic demo data.

Overhead

A performance tool has to show its own cost. In the benchmark, lightweight mode adds about 10–15 µs per measured render. Profiling mode costs more, and almost all of that comes from React's profiling build itself: a bare <Profiler> costs nearly the same. Performance has the full results, how to reproduce them, and the bundle-size budget.