[HOLD for payment 2025-02-05] [$250] Optimize hover state management

[mountiny]

Coming from here

BACKGROUND

The ActiveHoverable component manages hover states for interactive elements in our web interface. The current implementation is using multiple event listeners, including a global document-level mouseover listener, which is causing performance overhead, especially in views with many hoverable elements. For example, when hovering over chat messages, the CPU utilization can reach 100%.

PROBLEM

1. Global mouseover event listener on document level is causing continuous event processing and being triggered on extremely frequently (on every mouse pixel move)
2. Each hoverable instance adds its own document listener, multiplying the overhead
3. High CPU usage during mouse movement across the page
4. Redundant hover state checks and updates

SOLUTION

Optimize hover state management and CPU performance by:

1. Removing the global document-level mouseover listener
2. Using component-level mouse events only
3. Implementing efficient state tracking with lastKnownHoverState

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021882410245975337736
• Upwork Job ID: 1882410245975337736
• Last Price Increase: 2025-01-23
• Automatic offers:
• brunovjk | Reviewer | 105822890

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021882410245975337736

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @brunovjk (External)