[BUG] useHover is "stuck" on `true` value if the hovered element is removed from the DOM

[YossiSaadi]

Describe the bug

I have a scenario where, when I hover on an element (container), something else is rendered adjacent to it.
This hovered container contains a button as well as more stuff, and when clicking on the button, the view changes.
The issue is that if I click the button and the view changes, and therefore the hovered ref is removed.

To Reproduce

https://stackblitz.com/edit/vitejs-vite-sxroxj?file=src%2Ftest.tsx&terminal=dev

const hoverRef = useRef(null);
const isHovered = useHover<HTMLElement>(hoverRef);

{showInput ? (
  <input
    ref={hoverRef}
    type="text"
    placeholder="Hover over me"
    onClick={handleClick}
  />
) : (
  <button>
    Now I am a button!
  </button>
)}

once input is hovered and showInput becomes false, isHovered would stay stuck on true

Expected behavior

I guess the hook should be familiar with the fact its ref no longer exists in the DOM?

Additional context

No response

[sagarchoudhary96]

@juliencrn any updates on this ?

[CHE1RON]

This is still relevant, any news on this would be appreciated!

[clement-lta]

@YossiSaadi @sagarchoudhary96 @CHE1RON Hello. Are there any other cases related to this issue?
I think this can fixed by lifting useHover and the input component down to a separate component.

function Input({ onClick }) {
  const hoverRef = useRef<HTMLInputElement | null>(null);
  const isHovered = useHover<HTMLInputElement>(hoverRef);

  return (
    <input
      ref={hoverRef}
      type="text"
      placeholder="Hover over me"
      onClick={onClick}
    />
  );
}

function YourComponent() {
  const [showInput] = useState<boolean>(false);

  if (showInput) {
    return <Input onClick={handleClick} />
  }

  return (
    <button>
      Now I am a button!
    </button>
  );
}

Because I do not understand why we need to keep hoverRef on this level because its element can be removed.
If you give me a case which is good. I can provide a fix to adapt this