React Hook recipe from https://usehooks.com

use-hover-example.js

import { useRef, useState, useEffect } from 'react';

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

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

// Hook
function useHover() {
  const [value, setValue] = useState(false);
  
  const handleMouseOver = () => setValue(true);
  const handleMouseOut = () => setValue(false);
  
  const ref = useRef(null);

  useEffect(() => {
    if (ref && ref.current) {
      ref.current.addEventListener('mouseover', handleMouseOver);
      ref.current.addEventListener('mouseout', handleMouseOut);
    }
    
    return () => {
      if (ref && ref.current) {
        ref.current.removeEventListener('mouseover', handleMouseOver);
        ref.current.removeEventListener('mouseout', handleMouseOut);
      }
    };
  }, []);

  return [ref, value];
}