Last active
May 19, 2023 09:43
-
-
Save gragland/a32d08580b7e0604ff02cb069826ca2f to your computer and use it in GitHub Desktop.
React Hook recipe from https://usehooks.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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]; | |
} |
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>
);
}
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.
Can someone explain line 37 for me?
@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
+1 -
mouseenter
/mouseleave
is what I'm using in my implementation of this behavior.