Catch the React re-render hiding behind a slow INP

Every tap on this button freezes the page for a beat. I can't tell if it's my code or React's.

IntermediateRead 6 minDoing: an hour8 steps

What you'll have at the end

The component re-rendering on every interaction named in the Profiler, with a memoized fix that keeps INP under 200 milliseconds.

Before you start

You need

A React app already running in the browser, React DevTools installed, and one interaction, like a restock control, that visibly pauses the page before anything updates.

Not covered

Working out which of the three INP phases, input delay, processing, or paint, is the slow one when a re-render isn't already the obvious cause.

Leans on

8 steps

Where to go next

Name which INP phase slows your worst interaction

Start there instead if the slow interaction doesn't obviously trace back to your own component: it walks the same web-vitals breakdown down to which script ran, not which component re-rendered.

Wire web-vitals into your own analytics

Go there once the local fix is confirmed, to keep watching real visitors' INP instead of checking your own interaction by hand every time.

Checked 25 Aug 2026

Part of the Core Web Vitals and Performance Metrics cookbook