React Hook recipe from https://usehooks.com

use-hover-alt-example.js

import { useState, useCallback, useRef } from "react";

// Usage
function App() {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? '😁' : '☹️'}
    </div>
  );
}

// Hook
function useHover() {
  const [value, setValue] = useState(false);
	
  // Wrap in useCallback so we can use in dependencies below
  const handleMouseOver = useCallback(() => setValue(true), []);
  const handleMouseOut = useCallback(() => setValue(false), []);

  // Keep track of the last node passed to callbackRef
  // so we can remove its event listeners.
  const ref = useRef();
  
  // Use a callback ref instead of useEffect so that event listeners
  // get changed in the case that the returned ref gets added to
  // a different element later. With useEffect, changes to ref.current
  // wouldn't cause a rerender and thus the effect would run again.
  const callbackRef = useCallback(
    node => {
      if (ref.current) {
        ref.current.removeEventListener("mouseover", handleMouseOver);
        ref.current.removeEventListener("mouseout", handleMouseOut);
      }

      ref.current = node;

      if (ref.current) {
        ref.current.addEventListener("mouseover", handleMouseOver);
        ref.current.addEventListener("mouseout", handleMouseOut);
      }
    },
    [handleMouseOver, handleMouseOut]
  );

  return [callbackRef, value];
}

Thanks for sharing! I've typed this hook with Typescript, you may find it here: https://gist.github.com/mbelsky/72c1117a63489daf8e6067049d4532d0

Thoughts on changing the event handlers to mouseenter/mouseleave to prevent the bubbling issue? https://codesandbox.io/s/recursing-goldberg-7mtvc

• open console
• hover the button edges and then;
• hover the kitten

^ this is best solution that I've found. So +1. Also it could be used in original use-hover

I concur with mouseenter and mouseleave! Great idea.

+1 - mouseenter/mouseleave is what I'm using in my implementation of this behavior.

After using a similar hook to show an element on hover, I realised that I can use onMouseEnter and onMouseLeave to get the same results.

// Usage
function App() {
  const [isHovered, setIsHovered] = React.useState();

  return (
    <div 
     onMouseEnter={()=> setIsHovered(true)}
     onMouseLeave={()=> setIsHovered(false)}
     >
      {isHovered ? '😁' : '☹️'}
    </div>
  );
}

After using a similar hook to show an element on hover, I realised that I can use onMouseEnter and onMouseLeave to get the same results.

// Usage
function App() {
  const [isHovered, setIsHovered] = React.useState();

  return (
    <div 
     onMouseEnter={()=> setIsHovered(true)}
     onMouseLeave={()=> setIsHovered(false)}
     >
      {isHovered ? '😁' : '☹️'}
    </div>
  );
}

It's all about reusability.

Can someone explain line 37 for me?

@KymaniHanson, basically they are assigning the node element to the ref value.
Where node element is your component which is using the hook ref. (line 8)

For more details check the official docs
https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node