How to Get the Window’s Width on Resize in React

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:

JavaScript
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 text is updated with the width of the window when it is resized.

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.

JavaScript
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.

NoteuseEffect‘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:

JavaScript
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> ); }
The text is updated with the height of the window when it is resized.

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.

Every Crazy Thing JavaScript Does

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *