Should useHover fire hoverEnd on unmount?

[jeroenwienk]

It seems that if you hoist up the state from useHover and the component that renders useHover unmounts the onHoverEnd is not called.

// Component.js
const hover = useHover({
  onHoverStart(event) {
    parent.onHoverStart(event);
  },
  onHoverEnd(event) {
    parent.onHoverEnd(event);
  },
});

This causes lingering states in the app I'm working on. The question I have is should this be the responsibility of the component to clean up the state or should useHover be responsible for cleanup? This can be done by calling onHoverEnd in the cleanup effect when state.isHovered === true.

I have an example here what that would look like interactions/src/useHover.ts

Example of components responsibility:

// Component.js
useEffect(() => {
  return function() {
    if (hover.isHovered) {
      parent.onHoverEnd();
    }
  }
}, [])

[snowystinger]

This is an interesting case. I can see the benefits to hooking up some cleanup to onHoverEnd, though you should know when your component unmounts and be able to do any cleanup that way.

We don't currently do this for any of our interactions, see usePress here https://codesandbox.io/s/priceless-hypatia-pn79kq?file=/src/App.js though I could see it being argued that this is a different case because hovering is passive, where as the press is an action taken, and just because the component unmounted, doesn't actually mean pressing has stopped.

I'll check with the team to see if this is something we'd like to have. It'd be helpful in making a case if you could provide a concrete example of why you need this functionality if you do not mind.

[jeroenwienk]

It's just for a visual effect to highlight something else on the page when hovering over a specific item. Which of course is not very accesible but it's something our design wanted 😄.

So the user opens a picker and these pickable items are references to something else on the page and we give the source a wiggle/blue outline to indicate it comes from that source. When the item was picked the hoverEnd would not fire and the highlight would still remain visible. Which I clean up myself now.