To get the width and height of the window in React, access the window object’s innerWidth
and innerHeight
properties respectively.
import { useRef } from 'react';
export default function App() {
const windowSize = useRef([window.innerWidth, window.innerHeight]);
return (
<div>
<h2>Width: {windowSize.current[0]}</h2>
<h2>Height: {windowSize.current[1]}</h2>
</div>
);
}


The innerWidth
property returns the interior width of the window in pixels, including the width of the vertical scrollbar, if it is present.
Similarly, innerHeight
property returns the interior height of the window in pixels, including the height of the horizontal scrollbar, if it is present.
Get window width and height on resize in React
In the previous example, we needed to get the window width and height only once and we used a ref to store it.
If instead, you want to get the window’s width and height when it is resized, you’ll need to add a resize
event listener to the window
object and create a state variable to track changes to the width and height.
import { useState, useEffect } from 'react';
export default function App() {
const [windowSize, setWindowSize] = useState([
window.innerWidth,
window.innerHeight,
]);
useEffect(() => {
const handleWindowResize = () => {
setWindowSize([window.innerWidth, window.innerHeight]);
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
});
return (
<div>
<h2>Width: {windowSize[0]}</h2>
<h2>Height: {windowSize[1]}</h2>
</div>
);
}

We use the useState
React hook to create a state variable that will be updated whenever the height or width of the window changes.
The useState
hook returns an array of two values. This first is a variable that stores the state, and the second is a function that updates the state when it is called.
The useEffect
hook is used to perform an action when a component first renders, and when one or more specified dependencies change. In our example, the action is to add the event listener for the resize
hook with the addEventListener()
method.
We pass an empty dependencies array to the useEffect
, so that it is called only once in the component’s lifetime, and the resize event listener is only registered once – when the component first renders.
useEffect(() => {
const handleWindowResize = () => {
setWindowSize([window.innerWidth, window.innerHeight]);
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
});
In the resize
event listener, we update the state variable with the new height and width of the window.
The function we return in useEffect
is a function that performs clean-up operations in the component. We use the removeEventListener()
method to remove the resize
event listener in this clean-up function and prevent a memory leak.
Note: useEffect
‘s cleanup function runs after every re-render, not only when the component unmounts. This prevents memory leaks that happen when an observable prop changes value without the observers in the component unsubscribing from the previous observable value.

Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.