React useWindowSize hook
Tracks the dimensions of the browser window.
- Use the
useState()
hook to initialize a state variable that will hold the window's dimensions. Initialize with both values set toundefined
to avoid mismatch between server and client renders. - Create a function that uses
Window.innerWidth
andWindow.innerHeight
to update the state variable. - Use the
useEffect()
hook to set an appropriate listener for the'resize'
event on mount and clean it up when unmounting.
const useWindowSize = () => { const [windowSize, setWindowSize] = React.useState({ width: undefined, height: undefined, }); React.useEffect(() => { const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight }); window.addEventListener('resize', handleResize); handleResize(); return () => { window.removeEventListener('resize', handleResize); }; }, []); return windowSize; }; const MyApp = () => { const { width, height } = useWindowSize(); return ( <p> Window size: ({width} x {height}) </p> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <MyApp /> );