How to Track Window Size with a useWindowSize React Hook
Owner: SnippetBot
Created: 2026-10-12 00:00:25
Size: 1.26 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { useState, useEffect } from 'react';
function useWindowSize() {
// Initialize state with undefined width/height so server and client match
// Learn more here: https://joshwcomeau.com/react/the-complete-guide-to-useeffect/#on-the-server
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 and unmount
return windowSize;
}
// Usage example:
// function MyComponent() {
// const { width, height } = useWindowSize();
// return (
// <div>
// <p>Window width: {width || 'N/A'}</p>
// <p>Window height: {height || 'N/A'}</p>
// {width && width < 768 && <p>This is a small screen!</p>}
// </div>
// );
// }