iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To fix poor Interaction to Next Paint (INP) in a React app, identify the slow interaction in real-user data, reproduce it, and use a browser performance trace to find whether time is lost before the event handler, during JavaScript work, or while the browser presents the next frame. Then apply a fix to that measured cause and check field data again. React may contribute, but other event listeners, third-party scripts, and browser rendering work can also delay the paint.
What INP measures—and what counts as poor
INP assesses responsiveness across a page visit by examining interactions such as clicks, taps, and key presses and reporting a value representative of the slowest qualifying interaction, sometimes excluding outliers. As Jeremy Wagner and Barry Pollard explain, “INP observes the latency of all interactions a user has made with the page, and reports a single value which all (or nearly all) interactions were beneath.” Google’s INP guidance sets the good threshold at 200 milliseconds or less and the poor threshold at more than 500 milliseconds. Core Web Vitals are assessed at the 75th percentile of field page loads, so the thresholds describe how a distribution of real visits performs, not a guarantee about every individual interaction.
INP became a Core Web Vital and replaced First Input Delay (FID) on March 12, 2024. FID measured only the delay before the first input could be processed. INP evaluates responsiveness throughout the visit and includes time until the next frame is painted. The announcement of the change explains the transition.
Recommended Free Tools
Start with field data, then find the interaction
Field data tells you whether users are experiencing a responsiveness problem; a lab trace helps explain why a particular interaction is slow. They answer different questions, and their numbers should not be treated as interchangeable.
#1 Best Overall
Check CrUX and Search Console
Begin with Chrome User Experience Report (CrUX) data, surfaced in PageSpeed Insights or Search Console when your site has eligible data. CrUX can show INP at the origin or URL level where data is available. Aggregate data can establish that a page or site has a field problem, but it may not reveal the exact click, key press, or other interaction responsible. Google’s INP optimization guide describes these field-data sources and their diagnostic limits.
Use RUM when you need interaction context
Real user monitoring (RUM) can add details such as interaction type and when the interaction occurred, making it easier to connect a poor field result with a user flow. Coverage and detail depend on the RUM implementation; do not assume its measurements are directly equivalent to CrUX. Use each source for the question it answers: eligible real-user experience in CrUX, and richer interaction context when available in RUM.
Reproduce a realistic user flow
Use the interaction context from RUM if you have it. Otherwise, identify likely slow steps in the flow—for example, typing into a search field that updates a large result list, opening a menu, or navigating after a click—and reproduce them in a lab. Include interactions during page load if users can perform them then: the main thread may already be busy with startup work. A lab reproduction is useful for diagnosis only when it exercises the relevant interaction under conditions resembling the real flow.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Read the performance trace by latency component
Interaction latency consists of input delay, event processing, and presentation delay. Inspect the relevant browsing context and frame in the performance trace; the component consuming the time points toward the kind of fix to consider. Google’s optimization guidance and its INP explainer cover this breakdown.
| Component | What it represents | What to investigate |
|---|---|---|
| Input delay | Time before the interaction’s event processing can begin. | Look for a busy main thread, including long tasks already underway when the user interacts. |
| Event processing | Time spent running handlers associated with the interaction. | Inspect application handlers, React-triggered work, libraries, and third-party scripts. Work from any listener can delay the next paint. |
| Presentation delay | Time spent getting the resulting update ready to paint. | Investigate large rendering updates and other work needed before the next frame is presented. |
Do not assume that a slow click belongs to React just because the page uses React. The trace may show synchronous JavaScript, another listener, third-party work, or rendering and presentation as the bottleneck. Fix what the trace identifies rather than adding a React optimization by default.
Choose the React fix that matches the cause
Keep controlled input feedback urgent
A controlled text input must update its state synchronously in the change handler so that the displayed value tracks what the user types. React’s useTransition reference explicitly notes that Transition updates cannot control text inputs. Do not put the input’s own value update into a Transition to try to smooth typing.
Use a Transition for expensive, non-urgent updates
useTransition marks suitable state updates as non-blocking. React can interrupt background rendering to handle a more urgent update, such as another keystroke. This can suit expensive results or navigation that follow an urgent interaction, provided the input’s own controlled value remains synchronous. A Transition changes the priority of React rendering work; it is not a general-purpose fix for every long synchronous task.
Let a dependent view catch up with useDeferredValue
If a slow list or chart depends on a value that must update urgently elsewhere, useDeferredValue can let that view catch up after the urgent UI update. It is particularly useful when the dependent view cannot be fully optimized. It does not remove the underlying work, so use the trace to confirm that this rendering is contributing to the interaction delay. See React’s useDeferredValue documentation.
Best Value
Memoize only proven repeat work
useMemo can cache an expensive calculation between renders, but it does not make the first render faster. Profile a laggy interaction and use memoization where repeated calculation or rendering is actually part of the cost; memo and useMemo are not universal INP fixes. React’s useMemo reference describes its intended use.
Break up long synchronous work or reduce unnecessary JavaScript
If the trace shows a long task or unnecessary JavaScript occupying the main thread, address that work rather than trying to hide it with memoization. Google’s INP optimization guidance recommends avoiding or breaking up long tasks, avoiding unnecessary JavaScript, and avoiding large rendering updates. The appropriate change depends on what the trace shows; do not add scheduling APIs speculatively.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use React profiling as one diagnostic, not the verdict
React’s <Profiler> reports render timings including actualDuration and baseDuration. These can help identify expensive React rendering, but profiling adds overhead and is disabled in ordinary production builds unless a profiling build is enabled. A React render measurement does not account for every source of interaction latency, including browser work or other scripts. Consult the Profiler reference, and verify production behavior under representative conditions rather than treating profiler output alone as the user-facing INP result.
Validate the change in the field
After deployment, check whether the affected interaction improves in field observations and whether broader field INP changes over time. A lab trace tells you what happened in the interactions and conditions you reproduced; it cannot substitute for real-user experience. Use the same interaction flow for before-and-after lab diagnosis, and interpret field data through its own coverage and reporting window. Google’s optimization guide recommends validating against field behavior.
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.
