React Hook recipe from https://usehooks.com. Demo: https://codesandbox.io/s/01w2zmj010

use-hover-example.js

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

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

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

// Hook
function useHover() {
  const [value, setValue] = useState(false);

  const ref = useRef(null);

  const handleMouseOver = () => setValue(true);
  const handleMouseOut = () => setValue(false);

  useEffect(
    () => {
      const node = ref.current;
      if (node) {
        node.addEventListener('mouseover', handleMouseOver);
        node.addEventListener('mouseout', handleMouseOut);

        return () => {
          node.removeEventListener('mouseover', handleMouseOver);
          node.removeEventListener('mouseout', handleMouseOut);
        };
      }
    },
    [ref.current] // Recall only if ref changes
  );

  return [ref, value];
}

I ended up with the same useHover implementation as @raunofreiberg. Not only is it simpler, but it makes use of React's SyntheticEvents instead of listening to standard DOM events. The current implementation in this gist causes the hover state to change when you mouse in/out of a child element, which is probably not what you'd want (here's an example of what I mean, check out the console/log: https://codesandbox.io/s/x95rozo9wz). An implementation that uses React's onMouseEnter and onMouseLeave doesn't have that issue.

There is a bug with this due to the fact that it does not use a callback ref (https://reactjs.org/docs/refs-and-the-dom.html#callback-refs), so the hook does not get notified if a child component changes the element that the ref gets passed to.

Here is a demo that reproduces the issue: https://codesandbox.io/s/usehover-1l8w3

Hovering works at first, but after unmounting and remounting the hoverable element it no longer works.

Here is an alternative implementation that uses a callback ref to implement useHover, which does not have the above issue: https://codesandbox.io/s/usehover-1c6sc

Note that the above implementation also uses another custom hook, useRefEffect, which handles the potential gotchas surrounding using callback refs with hooks. It also makes callback refs easier to use by mimicking the useEffect API.

@gragland If you want, I can make a PR to update the useHover definition and add a page for useRefEffect?

Here is another version that fixes the issue by using a callback ref, but does not use useRefEffect: https://codesandbox.io/s/usehover-ue8v3

@butchler Thanks for pointing out this issue and sharing some fixes! I still see some value in sharing the existing version, since it's easier to understand and I'm guessing most people won't be changing the element the ref gets passed to, but I'll update the post description to link out to this alternate version: https://gist.github.com/gragland/a32d08580b7e0604ff02cb069826ca2f (same as yours, with some extra commenting).

@gragland Thank you :)

Binding event listeners to the node can lead to the hover state getting out of sync if you move your mouse quickly. Instead bind the listeners to the document and check to see if the event target is our node or our node contains the event target:

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

export default function useHover() {
  const [value, setValue] = useState(false);

  const ref = useRef(null);

  const handleMouseOver = e => {
    const node = ref.current;
    if (!node) return setValue(false);
    setValue(e.target === node || node.contains(e.target));
  };

  useEffect(
    () => {
      const node = ref.current;
      if (node) {
        const doc = node.ownerDocument;
        doc.addEventListener("mouseover", handleMouseOver);

        return () => {
          doc.removeEventListener("mouseover", handleMouseOver);
        };
      }
    },
    [ref.current] // Recall only if ref changes
  );

  return [ref, value];
}

@jcready What do you mean by getting out of sync? Your example seems reasonable, just want to understand what the issue with the current implementation is.

Hey @gragland
Current implementation re-creates handleMouseOver and handleMouseOut callbacks on every state update. There is a fix for that: https://gist.github.com/mbelsky/909c7a6b9bde3289e91a6448ae1a74b3/revisions#diff-0dd251e6c939d6c6f3846a366eade1f2

Hello everyone!
I've made a Typescript version:

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


type THook<T extends HTMLElement> = [
  React.RefObject<T>,
  boolean,
];

export const useMouseHover = <T extends HTMLElement>(): THook<T> => {
  const [hovered, setHovered] = useState(false);
  const ref = useRef<T>(null);

  useEffect(() => {
    const handleMouseOver = (): void => setHovered(true);
    const handleMouseOut = (): void => setHovered(false);
    const node = ref && ref.current;

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

  return [ref, hovered];
};

Example of usage:

const [buttonRef, buttonHovered] = useMouseHover<HTMLButtonElement>();
const color = buttonHovered ? 'red' : 'blue';

return (
  <button
    ref={buttonRef}
    style={{ color }}
  >
    click me
  </button>
);

React Hook React.useEffect has an unnecessary dependency: 'ref.current'. Either exclude it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component. eslint (react-hooks/exhaustive-deps)

    [ref.current] // Recall only if ref changes

could be changed to

    [ref] // Recall only if ref changes

?

@forresto this change won't fix that issue. Try @jjenzz's solution

I had an issue with the last event being fired being a mouseover event. I switched the mouseover to mouseenter and mouseout to mouseleave which solved it. Any drawbacks to this method? It also limits the amount of events firing as it doesn't fire on child elements.

I don't really think you need the useRef hook.
you could just use the useState hook and the onMouseEnter and onMouseLeave as props on the component.

what do you think?

import React,{useState,useRef,useEffect} from "react"

export default function Image({className,image}){
    const [ishover, setIsHover] = useState(false)
    console.log(ishover)  
    
    return(
        <div 
            className={`${className} image-container`}
            onMouseEnter={() => setIsHover(true)}
            onMouseLeave={() => setIsHover(false)}
        >
            <img src={image.url} className="image-grid"/>    
        </div>
    )
}