Recommended Free Tools
To fix poor Interaction to Next Paint (INP) in a React app, identify a slow interaction in field data, reproduce it, and use a performance trace to determine whether the delay comes from input waiting, JavaScript event handling, or the browser’s next paint. Then target that cause: keep controlled input feedback urgent, defer suitable non-urgent rendering, and avoid long synchronous tasks or unnecessary updates. React can contribute to slow interactions, but it is not the only possible cause.
What INP measures—and when it is poor
INP measures responsiveness across a page visit. It considers the latency of interactions such as clicks, taps, and key presses, then reports a value representative of the slowest qualifying interaction (sometimes ignoring outliers). An interaction can include multiple event handlers triggered by one gesture.
As an Amazon Associate I earn from qualifying purchases.
Google’s current guidance classifies INP of 200 milliseconds or less as good and values over 500 milliseconds as poor. Core Web Vitals thresholds are assessed at the 75th percentile of field page loads. INP replaced First Input Delay (FID) as a Core Web Vital on March 12, 2024: unlike FID, INP considers responsiveness throughout the visit and includes the time until the next frame is painted. See Google’s INP guidance and its Web Vitals assessment guidance.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsHow to find the interaction users experience as slow
Start with field data
Check Chrome User Experience Report (CrUX) data in PageSpeed Insights or Search Console if your site has enough eligible data to appear. CrUX can show whether INP is a problem for an origin or URL, but aggregate results often do not identify the exact gesture or code path responsible. Real User Monitoring (RUM) can add interaction-level context, such as the interaction type and when it occurred. Field data and RUM coverage differ, so do not treat their measurements as interchangeable. Google’s optimization guide explains how field diagnosis fits into the INP workflow.
Reproduce a realistic user flow
Use the interaction context from RUM when available. Otherwise, follow the user journey and test likely slow actions: typing into a search field, opening a menu, filtering a large list, or navigating to a view with substantial work. Include interactions made while the page is loading; the main thread may be busy even if the same action feels fast after load.
Separate field observation from lab diagnosis
Field data tells you what eligible real users experience. A lab reproduction lets you control the flow and inspect a trace for likely causes. A lab result describes only the interactions and conditions reproduced; it cannot stand in for real-user experience. After deployment, check both the affected interaction and broader field data.
Rank #2
- Used Book in Good Condition
How to read an INP performance trace
Interaction latency has three parts: input delay (time waiting before the interaction’s handlers can run), processing duration (time spent running event handlers and related work), and presentation delay (time from the end of processing until the next frame is painted). Inspect the relevant browser frame or browsing context and determine which part dominates. Application handlers, React-triggered rendering, other libraries, browser work, and third-party scripts can all hold up the next paint. See Google’s guide to optimizing INP and the INP codelab.
- High input delay: Look for a busy main thread, including long-running JavaScript that began before the gesture.
- High processing duration: Inspect the event handlers and work they trigger. Check whether the interaction does unnecessary calculation, repeated updates, or too much synchronous JavaScript.
- High presentation delay: Investigate the rendering work needed before the browser can show the next frame, including large UI updates.
These are diagnostic directions, not automatic diagnoses: follow the trace through the interaction rather than inferring the cause from the React component alone.
Rank #3
- Used Book in Good Condition
Choose a React fix that matches the trace
Keep controlled input updates urgent
A controlled text input must update its state synchronously in its change handler so the displayed value tracks what the user types. React does not allow a Transition update to control a text input. If typing triggers expensive results, keep the input value update urgent and move suitable dependent work out of that urgent path. See React’s useTransition reference.
Use a Transition for non-urgent state updates
useTransition marks state updates as non-blocking, allowing React to interrupt background rendering to handle a more urgent update, such as another keystroke. It may suit expensive results or navigation that need not block immediate feedback. It is not a way to defer the controlled input’s own value update, and it will not solve time spent in unrelated listeners or third-party scripts.
Defer a slow dependent view when it can catch up
useDeferredValue can let a slow list, chart, or other dependent view update after urgent UI changes. It is useful when the slow view cannot be fully optimized, but it does not make the underlying work disappear. See React’s useDeferredValue reference.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Memoize only measured repeat work
useMemo can cache an expensive calculation between renders, but it does not make the first calculation faster. Profile a laggy interaction and use memoization where repeated work is actually contributing to the delay; memo and useMemo are not universal INP fixes. See React’s useMemo reference.
Best Value
Break up long synchronous work or reduce oversized updates
If the trace points to long JavaScript work, break up tasks where possible or avoid unnecessary JavaScript. If a large rendering update dominates, reduce the work the interaction triggers. The trace should determine whether the remedy is scheduling, selective memoization, smaller updates, or work outside React.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How to profile React without mistaking profiling for production
React’s <Profiler> reports render measurements including actualDuration and baseDuration. Use them to investigate component rendering, but interpret them alongside the browser performance trace: React render timing does not account for every source of interaction latency. Profiling adds overhead and is disabled in ordinary production builds unless a profiling build is enabled. Check behavior in a production build under representative conditions as well. See React’s Profiler reference.
Validate the change in the field
After deploying a targeted fix, recheck the interaction that led you to investigate and monitor field INP. A lab trace can confirm what happened in the reproduction; only field data can show whether real users’ experience changed. If the interaction remains slow, return to the trace and inspect the remaining latency component instead of layering on speculative React optimizations.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
