🔰 First interaction detection with useOnInteraction hook

Intro

Discover the art of efficiently detecting and managing initial user interactions in your web app with the potent useOnInteraction hook.

First interaction use cases

Sometimes, you need to detect the user's first interaction in the application and perform specific actions. This could involve rendering a widget, logging an entry in the database via a dedicated API call, or other tasks. Performing these operations immediately after the application mounts - during the first render in React - may slow down your Lighthouse benchmark. If you prioritize performance, it's advisable to consider utilizing this mechanism.

For example, consider a scenario where a user lands on your page that requires fetching data to display a pop-up widget. Without this mechanism, you would make a call every time the user refreshes the page, even if they don't need this data/widget. By implementing this mechanism, you load the required data only when the user truly "interacts" with the app, reducing costs and improving application performance metrics. This is possible because the additional code for the required operation can be lazy-loaded.

In the https://4markdown.com/ app, we utilize it to load the Firebase library, which is relatively large, only after the user interacts with the app. This enhancement has boosted our benchmarks from 94% to 100%. Check out the GIF below to understand how it works:

1. Detecting user interaction

Detecting the first user interaction varies between mobile and desktop devices. On mobile devices, it involves the use of a touch event, while on desktop devices, it relies on a mouse move event. Therefore, we require two distinct events and a mechanism to differentiate between them after detecting the initial user interaction.

2. Design of useOnInteraction hook

To avoid cluttering our component code with repetitive logic for detecting the first user interaction, we'll create a custom hook called useOnInteraction. Components will then simply consume this hook and execute the necessary operations based on the results.

3. Implementing useOnInteraction hook

The implementation of the useOnInteraction hook involves utilizing useState to trigger a rerender when an interaction is detected, and the useEffect hook to listen to relevant events.

When interaction is detected, we remove the current listeners and skip adding new ones with a simple if statement at the beginning of the useEffect implementation.

Summary

Now, you can listen for the first interaction and perform the necessary operations. I use this hook for lazy loading dedicated components or executing required calls/checks. For instance, it might involve checking the authorization status only after the user interacts with the app, preventing unnecessary calls to my API.