Socket
Socket
Sign inDemoInstall

await-interaction-response

Package Overview
Dependencies
0
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

await-interaction-response

Improve [INP (Interaction to Next Paint)](https://web.dev/articles/inp) by allowing the browser to paint before blocking the main thread. You can test how it works in the [live demo](https://await-interaction-response.vercel.app/).


Version published
Maintainers
1
Created

Readme

Source

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:

pnpm add await-interaction-response
npm install await-interaction-response
yarn add await-interaction-response

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

import interactionResponse from 'await-interaction-response';

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

Q&A

When should I use or not use this?

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.

How is this useful for INP?

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.

How does it work?

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.

FAQs

Package last updated on 13 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc