onMouseLeave/onMouseOut sometimes triggered on page refresh React

Question

I have an image and when i put the mouse on it, onMouseOver event is triggered and an animation appears. Then when i leave the mouse from image the animation ends.

Here is a fragment of my code, i'm using React and Mozilla Firefox:

<img className={classNameDefine('presentation__image')}    
    onMouseOver={() => {
       handleAnimation('animationA')
    }} 
    onMouseLeave={() => {
       handleAnimation('animationA')
    }}
src={logo} alt="s"/>

The issue is that sometimes when i refresh page and put mouse on the image it works well, but other times on refresh the onMouseLeave event it triggered for no reason and breaks my animation.

I tried using onMouseEnter intead of onMouseOver and onMouseOut instead of onMouseLeave, but the same problem occours.

Why sometimes it works well but in others times not?

PD: I tried by using another navigator like Chrome and Edge, and the mouse events works fine without bugs. Now i don't know if there is a problem between Mozilla (navegator i am using) and React. Only on mozilla the issue appears.

Answer 1

Are you using any kind of state instant of Ref . If you are using state then it Re-Renders the page and that's why it is breaking your animation.