Next.js

Interact with the inputs below to compare INP scores

Open the devtools console to see logs in how the INP score changes.

Block main thread for 200ms on change usingawait-interaction-response:Block main thread for 200ms on change with useEffect and startTransition:Block main thread for 200ms on change:

For this particular use case, where the main thread is blocked by JS execution during the interaction, await-interaction-response is more responsive.

For more complex UI updates, startTransition is likely the way to go (or a combination of the two).