The get the width of the browser window on resize in React, add a resize
event listener to the window
object, then access the innerWidth
property in the listener.
For example:
import { useState, useEffect } from 'react';
export default function App() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
const handleWindowResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
});
return (
<div>
<h2>Width: {windowWidth}</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.
The resize
event is fired whenever the width or height of the window/document view changes.
We use the useState
React hook to create a state variable that will update whenever the width of the window changes.
The useState
hook returns an array of two values. The 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 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 = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
});
In the resize
event listener, we update the state variable with the new window width.
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.
Get window height on resize
We can do a similar thing to get the window’s height on resize, but we’ll use the window
object’s innerHeight
property instead in the resize
event listener:
import { useState, useEffect } from 'react';
export default function App() {
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
useEffect(() => {
const handleWindowResize = () => {
setWindowHeight(window.innerHeight);
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
});
return (
<div>
<h2>Height: {windowHeight}</h2>
</div>
);
}
innerHeight
property returns the interior height of the window in pixels, including the height of the horizontal scrollbar, if it is present.
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.