monitoring State with useHoverEffect Reactjs

In this Snippet, we will be creating a useHoverEffect hook, that allows our components to know about the hover state of any element that we attach a ref to!

  • Detect whether the mouse is hovering an element.
  • The hook returns a ref and a boolean value to let us know if the element with that ref is being hovered
  • add the ref to any element whose hover state you want to monitor
function useHoverEffect() {
  const [value, setValue] = useState(false);
  const ref = useRef(null);
  const handleMouseOver = () => setValue(true);
  const handleMouseOut = () => setValue(false);
  useEffect(() => {
    const element = ref.current;
    if (element) {
      element.addEventListener("mouseover", handleMouseOver);
      element.addEventListener("mouseout", handleMouseOut);
    return () => {
      element.removeEventListener("mouseover", handleMouseOver);
      element.removeEventListener("mouseout", handleMouseOut);
  }, [ref]);
  return [ref, value];
function App() {
  const [hoverRef, isHovered] = useHover();
  return (
          width: "500px",
          height: "500px",
          background: isHovered ? "green" : "red",

export default App;

Live Demo

Maher Gallaoui

You like our Content? Follow us to stay up-to-date.