await-interaction-response

Improve INP (Interaction to Next Paint) by allowing the browser to paint before blocking the main thread. You can test how it works in the live demo.

You can learn more about INP and this package in our blog: Demystifying INP: New tools and actionable insights.

How to use

Install the package:

``bash
pnpm add await-interaction-response
`

`bash
npm install await-interaction-response
`

`bash
yarn add await-interaction-response
`

Next, add awat interactionResponse() to interactions that have a bad INP:

`tsx
import interactionResponse from 'await-interaction-response';

type="text"
value={value}
onChange={async (e) => {
setValue(e.target.value);
await interactionResponse();
expensiveMainThreadWork();
}}
/>;
`

Q&A

$3

Generally, add await interactionResponse() in places where you're having INP issues and when your UI library solutions (like React's startTransition) aren't enough for your use case.

So a first step is to monitor for INP issues in development with tools like the Vercel Toolbar or the chrome web-vitals extension and
in production with services like Vercel Speed Insights that do RUM.

$3

Your INP score is affected when the browser does not have time to update the UI after an user interaction. A common cause is executing JavaScript in the main thread for longer periods of time. To prevent this, you'll want to delay executing JavaScript code unrelated to the UI change until the main thread is free to handle it.

Therefore, await-interaction-response simply forces you to wait and gives the browser time to commit the UI change. This helps improve INP in situations where JavaScript is the culprit.

$3

interactionResponse is a function with 8 lines of code that waits until the next animation frame to start a 0` time out, which delays resolving its promise to the end of the queue in the event loop. Once called the promise resolves and execution continues to the rest of your JS code.