useHover does not work if the target element is rendered after the hook

[marklundin]

Describe the bug
If the element accepting the target ref is not rendered untill after the hook has been initialised, the hover behaviour does not work.

To Reproduce

Click on the button to show the hover area. hover area becomes visible but does not change the hover state
https://codesandbox.io/s/react-hookhover-example-forked-rq54q?file=/src/App.js

Expected behavior
The hover area should trigger a change in the hover state, even if it is not renderered at the same time as the hook

[marklundin]

For further investigating It seems this is more broadly related to using useRef inside a useEffect. Using callback refs will actually foce things to get re-avaulated

https://codesandbox.io/s/usehover-forked-8wssf?file=/src/use-hover.js:0-1025

[jaredLunde]

Yeah, ultimately this is your responsibility. If you need this behavior you need to use useState to set the ref rather than useRef.

https://codesandbox.io/s/react-hook-hover-example-forked-z6b9e?file=/src/App.js