perf: optimize overlay rendering and state handling

[pivanov]

This optimization focuses on improving the element inspection overlay performance and code clarity. Key changes:

1. Introduces element caching to prevent redundant redraws
2. Consolidates overlay update logic with a unified type parameter
3. Removes redundant state variables (currentHoveredElement)
4. Improves event handling order and code organization
5. Maintains proper state transitions while reducing unnecessary operations

The changes make the inspection tool more efficient and the code more maintainable.

https://github.com/user-attachments/assets/de394826-f44f-4c72-b5eb-0aa490019de9

[vercel[bot]]

@pivanov is attempting to deploy a commit to the Million Team on Vercel.

A member of the Team first needs to authorize it.

[aidenybai]

wow this is fast asf

[pivanov]

wow this is fast asf

Yep :) I have few more ideas but I will wait to merge (or improve this one if needed) and I will bring the rest ;)

[pivanov]

I changed from tracking window-level metrics (scroll position, window size) to directly comparing element positions using getBoundingClientRect(). Here's why I think this is a better approach:

More accurate position tracking

• getBoundingClientRect() gives me the element's position relative to the viewport
• Catches all types of position changes (scrolling, transforms, resizing)
• Works correctly with scrollable containers at any level of nesting

More reliable

• Window metrics could miss position changes from container scrolling
• Previous approach wouldn't catch CSS transforms
• Element's actual position is more important than what caused the change

Simpler code

• I removed multiple tracking variables
• I removed separate scroll event listeners
• I now have a single source of truth for element position

Better edge case handling

• Works with nested scrollable containers
• Handles CSS transforms properly
• More accurate for complex layouts

Tradeoff: Slightly more frequent getBoundingClientRect() calls, but since I'm already in a RAF loop and only checking one element, the performance impact is minimal compared to the benefits of more reliable position tracking.

https://github.com/user-attachments/assets/2bdd0285-3183-4f3c-bdb8-994b3f6f1043

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-scan	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 4, 2024 11:17pm

[pivanov]

This one is obsolate now :)