Fixing INP: How to Stop React Apps from Feeling Slow
Your dashboard feels slow. Your API is fast. Lighthouse shows green scores. Yet every click lags.
That’s an INP problem.
Interaction to Next Paint (INP) measures how long a page takes to respond to a user. It replaced First Input Delay (FID) in March 2024. FID only looked at the first click; INP watches every interaction.
An INP score under 200 ms feels fast. Over 500 ms feels sluggish.
To fix INP, break it into three phases:
- Input Delay – the gap between a click and when your code starts. It appears when the main thread is busy.
- Processing Time – how long your functions and React state updates run.
- Presentation Delay – the gap between finishing your code and the browser painting the screen.
Fixing Input Delay
Long tasks block the main thread. If a task runs longer than 50 ms, it stalls clicks. Call scheduler.yield() to split long tasks into smaller chunks so the browser can process clicks between them.
Fixing Processing Time
Use React’s transition APIs to keep the UI responsive.
startTransition– wrap non-urgent updates. React can pause a heavy update to handle a new click.useDeferredValue– defer values that don’t need to update instantly.
These APIs don’t speed up code; they make it interruptible, which lowers your INP.
Fixing Presentation Delay
Too many DOM elements slow the paint.
- Apply
content-visibility: autoin CSS to skip rendering off-screen elements. - Stop layout thrashing: never read a style and then write a style in the same loop. Batch reads and writes instead.
- Virtualize long lists.
How to Measure
Lighthouse runs in a lab and can’t click your buttons like a real person. Install the web-vitals library and capture real data from your users.