Last active
January 21, 2022 13:02
-
-
Save gragland/4e3d9b1c934a18dc76f585350f97e321 to your computer and use it in GitHub Desktop.
React Hook recipe from https://usehooks.com. Demo: https://codesandbox.io/s/jj61r2w6z5
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, useEffect } from 'react'; | |
// Usage | |
function App() { | |
const size = useWindowSize(); | |
return ( | |
<div> | |
{size.width}px / {size.height}px | |
</div> | |
); | |
} | |
// Hook | |
function useWindowSize() { | |
// Initialize state with undefined width/height so server and client renders match | |
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ | |
const [windowSize, setWindowSize] = useState({ | |
width: undefined, | |
height: undefined, | |
}); | |
useEffect(() => { | |
// Handler to call on window resize | |
function handleResize() { | |
// Set window width/height to state | |
setWindowSize({ | |
width: window.innerWidth, | |
height: window.innerHeight, | |
}); | |
} | |
// Add event listener | |
window.addEventListener("resize", handleResize); | |
// Call handler right away so state gets updated with initial window size | |
handleResize(); | |
// Remove event listener on cleanup | |
return () => window.removeEventListener("resize", handleResize); | |
}, []); // Empty array ensures that effect is only run on mount | |
return windowSize; | |
} |
Long time has passed , why haven't this been updated with debounce or throttle ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
change the
useEffect
touseLayoutEffect
because you see a flicker before it's set in some cases.useLayoutEffect
is definitely the way to go here. Here an example where a div is centered based on the body, if you change it to a normaluseEffect
you will see it flicker. https://codesandbox.io/s/still-wave-q0pk7