Skip to content

Instantly share code, notes, and snippets.

@gragland
Last active May 19, 2023 09:43
  • Star 15 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
React Hook recipe from https://usehooks.com
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];
}
@mkamalkayani
Copy link

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

@Andrewnt219
Copy link

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.

@KymaniHanson
Copy link

Can someone explain line 37 for me?

@ulises-castro
Copy link

ulises-castro commented Oct 24, 2021

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment