Saltar al contenido principal
All notes
2026 · 04 · 5 min

INP in React 19: the new bottleneck

Most teams optimised LCP to death and then watched INP regress. React 19's transitions and useDeferredValue help — if you actually wire them up. Most don't.

INP replaced FID as a Core Web Vital, and most teams found out the hard way: their site that scored 100 on Lighthouse was failing INP at p75. The reason is that synthetic benchmarks don't simulate slow main threads on real Android devices.

React 19's transitions are the right tool. Wrap any state update that triggers a heavy render in `startTransition` and the input handler stays under 200ms. Combined with `useDeferredValue` for derived state, you can keep the main thread responsive even on three-year-old phones.

The trap: people apply transitions only to obvious heavy cases (search, filtering) and miss the subtle ones. Tab switches, dropdown opens, modal closes — anything that triggers a re-render of more than ~5kb of components benefits. Profile in production with Datadog RUM, not on your M3 Max.

WRITTEN BY
Ibrahim Aly
SENIOR FS ENGINEER · BERLIN ↔ CAIRO