[internal] Refactor: use class for hover hook state

[romgrk]

New attempt of #3451

Refactor to use a class for hover hook state.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3791
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3791
  

commit: 033bea5

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+234B(+0.06%)	▼-13B(-0.01%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	033bea5
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/698175bb6a4ba90008169a22
😎 Deploy Preview	https://deploy-preview-3791--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Summary

This PR refactors the hover interaction hooks to use a class-based approach instead of individual React refs, improving performance by reducing the number of ref objects created.

Key Changes:

• Replaced multiple React.useRef objects with a single HoverInteraction class instance
• Changed property access from .current to direct property access
• Simplified dependency arrays in useCallback and useEffect by including the single instance instead of multiple individual refs
• Used useRefWithInit to create the class instance, ensuring it's initialized once per component

Observations:

• Property names retain the "Ref" suffix (e.g., pointerTypeRef, interactedInsideRef) even though they're no longer ref objects - this is a naming inconsistency but doesn't affect functionality
• The refactoring maintains the shared state pattern where both reference and floating interaction hooks share the same HoverInteraction instance via the store's dataRef
• All logic remains unchanged; this is purely a structural refactoring for performance optimization

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• This is a purely structural refactoring that converts React refs to class properties for performance optimization. The logic remains identical, and the changes follow established patterns in the codebase (similar to useTimeout's Timeout class). All property accesses are correctly updated from .current to direct access. The only minor issue is a naming inconsistency with retained "Ref" suffixes, which doesn't affect functionality.
• No files require special attention

Important Files Changed

Filename	Overview
packages/react/src/floating-ui-react/hooks/useHoverInteractionSharedState.ts	Refactored from React refs to a HoverInteraction class, converting individual refs into class properties for better performance
packages/react/src/floating-ui-react/hooks/useHoverFloatingInteraction.ts	Updated to use class instance properties instead of ref objects, simplified dependency arrays
packages/react/src/floating-ui-react/hooks/useHoverReferenceInteraction.ts	Updated to use class instance properties instead of ref objects, simplified dependency arrays

[greptile-apps]

_{3 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[michaldudak]

I'm not sure this is correct. Since this runs on all components using useHoverInteractionSharedState, unmounting a single Trigger will reset the timers. The more correct way of handling this would be triggering the cleanup when the Root part unmounts, but this would require having another hook for the Root.

[romgrk]

Doesn't that issue also apply to the already existing hook?

[michaldudak]

It does, indeed. Let's tackle it in a separate PR, then.