State not updating between Pressable onHoverIn and onHoverOut handlers

[todd-grilliot]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

We found a bug with the way that onHoverIn and onHoverOut are interacting with one another. It appears that Pressable is not updating the onHoverOut handler while the node it's assigned to is hovered. This is leading to unexpected behavior.

Lets say you have a Pressable with both an onHoverIn and onHoverOut prop. If you set state inside of my onHoverIn handler, and then try to access that state inside my onHoverOut handler. It appears that the old state value will be accessed, instead of the updated value.

Expected behavior

Let's say you have a piece of state called 'hovered', and you want to set it to true when you hover in, and false when you hoverOut.
You can do that, no problem. But if you want to check the value of hovered inside your handlers before setting it, you may run into this bug.

For our example there is a Pressable with these two handlers assigned to onHoverIn and onHoverOut, respectively:
const handleHoverIn = () => { if(!hovered) setHovered(true) };
const handleHoverOut = () => { if(hovered) setHovered(false) };

The behavior you might expect would be that each time you hover in, hovered is set to true if it is not already true, and each time you hover out, hovered's value is checked, and set to false if hovered is true. So when you hover in and out of the Pressable, it would toggle the hovered state on and off.

When handleHoverOut checks the value of hovered, it is the same as it was when I hovered in. This means that our example code will only set hovered to false every other time that I hover in and back out. Because if hovered was false when I hovered in, it will still be false when handleHoverOut checks for it, even though it was just set to true.

Steps to reproduce

I've reproduced this bug in a codesandbox.io, in chrome, using just some very basic dependencies. "https://codesandbox.io/s/react-native-web-pressable-onhover-bug-58jqjn?file=/src/App.js"

• react 18.2
• react-dom 18.2
• react-native-web 0.19
• react-scripts 3.3.0

To replicate the bug, drag your cursor over the pressable, and then drag your cursor out of the pressable. You will see that onHoverOut did not set the state of hovered to false.

Test case

https://codesandbox.io/s/react-native-web-pressable-onhover-bug-58jqjn?file=/src/App.js

Additional comments

I hope this is helpful and made sense! This is my first time posting an issue to a public repo