Rank your React components by average render cost
A tiny CLI that turns React Profiler data into a ranked table — which components are
actually expensive, how often they re-render, and whether your last change made things
worse. Real actualDuration, not guesswork.
$ react-render-cost profile.json profile.json — 5 components, 9 renders # component avg ms max ms renders m/u total ms ─ ─────────── ────── ────── ─────── ─── ──────── 1 MessageList 14.07 18.40 3 1/2 42.20 2 Composer 5.80 6.20 2 1/1 11.60 3 Sidebar 4.10 4.10 1 1/0 4.10 4 Avatar 1.05 1.20 2 1/1 2.10 5 Header 0.60 0.60 1 1/0 0.60
Why reach for it
Three things it does that a flame graph makes you work for.
Rank by real cost
Sorts every component by mean actualDuration, so the genuinely slow ones sit at the top — no scrubbing a timeline.
Diff two runs
Point --baseline at a saved profile and see exactly what got faster, what regressed, and by how much.
Budget gate
--budget and diff mode exit non-zero when a component crosses your line — drop it straight into CI.
Catch a regression the moment it lands
Save a baseline, run the diff, and slow-downs light up red — improvements in green.
$ react-render-cost profile.json --baseline main.json profile.json — diff vs main.json component baseline current Δ ms % status ─────────── ──────── ─────── ───── ──── ─────────── MessageList 7.10 14.07 +6.97 +98% ▲ regressed Composer 5.60 5.80 +0.20 +4% ▲ regressed Sidebar 4.20 4.10 -0.10 -2% ▽ improved Avatar 1.10 1.05 -0.05 -5% · same Header 0.60 0.60 0.00 0% · same ✗ 2 components slower by more than 0.10 ms
Install & try it
Node 18+. Installs as react-render-cost and the short alias rrc.