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];
}

@gragland did a bit more thoughts on explicit passing ref to hook. It looks nice to make hook to manage ref inside hook itself in this simple scenario. But it doesn't scale if we need another hook with ref for the same element. So it is better to revert it back I suppose.

So, for instance, if we add useFocus into the same example we getting in a trouble:

function App() {
  const [hoverRef, isHovered] = useHover();
  const [focusRef, isFocused] = useFocus();

  return (
    <div ref={hoverRef /* we can't pass multiple refs here :( */}>
      {isHovered ? 'hovered' : 'not hovered'}
      {isFocused ? 'focused' : 'not focused'}
    </div>
  );
}

@gragland I guess we should make multiple hooks reusing same ref example in a next issue of usehooks.com to show off why creating ref inside a hook doesn't scale. And probably we will get more ideas from community.

That's a great point. I guess we should invert control and require hoverRef as a parameter to useHover.

Why even rely on refs?

function useFocus() {
  const [focused, set] = useState(false);
  const binder = {
    onFocus: () => set(true),
    onBlur: () => set(false)
  };
  return [focused, binder];
}

function useHover() {
  const [hovered, set] = useState(false);
  const binder = {
    onMouseEnter: () => set(true),
    onMouseLeave: () => set(false)
  };
  return [hovered, binder];
}

function HoverableAndFocusable() {
  const [hovered, bindHover] = useHover();
  const [focused, bindFocus] = useFocus();
  return (
    <div>
      <input {...bindHover} {...bindFocus} />
      <h2>{hovered ? "Hovered" : "Not hovered"}</h2>
      <h2>{focused ? "Focused" : "Not focused"}</h2>
    </div>
  );
}

@andybarron Thanks, added your suggestions! I think we can avoid returning at all in useEffect if no ref.current right?

@Guria Good point about it not scaling well if we need another hook with same ref. I like the idea of just passing in a hoverRef or even not using refs at all like @raunofreiberg suggests.

I'm trying to find the right balance between keeping these code recipes simple and accounting for the various edge cases that come up. Rather than refining the original recipe past a certain point, I'm wondering if it might be more informative to include multiple code variations on the site (could be a row of links above the code block that user can toggle between). This way they can learn things like "oh, for super simple situations I could just have a hook return a ref, but if that's too limiting I can also accept a ref as an argument". Basically a more user friendly way to learn things discussed in this gist. Anyway, thinking on this and open to feedback!

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>
    )
}