JIYIK CN >

Get the width and height of the window in React:

1. Use the innerWidth and innerHeight properties of the window object.
2. Add an event listener useEffectfor the resize event in the hook.
3. Save changes to the window width and height in state variables.

import {useEffect, useState} from 'react';

export default function App() {
  const [windowSize, setWindowSize] = useState(getWindowSize());

  useEffect(() => {
    function handleWindowResize() {
      setWindowSize(getWindowSize());
    }

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, []);

  return (
    <div>
      <h2>Width: {windowSize.innerWidth}</h2>

      <h2>Height: {windowSize.innerHeight}</h2>
    </div>
  );
}

function getWindowSize() {
  const {innerWidth, innerHeight} = window;
  return {innerWidth, innerHeight};
}

We initialize a windowSizestate variable called , which tracks changes to the width and height of the window object.

The innerWidth property returns the inner width of the window in pixels. This includes the width of the vertical scroll bar, if present.

The innerHeight property returns the inner height of the window in pixels, including the height of the horizontal scroll bar, if one exists.

We pass an empty dependencies array to useEffectthe hook because we only want to add the event listener for the resize event once - on the initial render.

useEffect(() => {
  function handleWindowResize() {
    setWindowSize(getWindowSize());
  }

  window.addEventListener('resize', handleWindowResize);

  return () => {
    window.removeEventListener('resize', handleWindowResize);
  };
}, []);

The event is fired when the window is resized resize.

Every time the window is resized, we update the state variable based on the window's new innerWidthsum .innerHeightwindowSize

The function we useEffectreturn from the hook will be called when the component unmounts.

We use removeEventListenerthe method to remove the event listener we previously registered.

The cleanup step is important because we want to make sure that we don't have any memory leaks in our application.