Custom Hook to get window's width and height in React dynamically.
Tags: javascript, react, ui, beginners
Published: 2023-06-18 07:17:53

Hey Everyone!, Today we are going to discuss how to get a window's width and height with a custom hook. This coding exercise was asked of me in one of my interviews.
The interviewer asked me, **Payal, create one custom hook (for reusing the code) to get the window's width and height dynamically when we resize it.**
And I took time to determine that, but today I will make others understand in a 101 way.
So, let's not waste time and start...

I am going to divide it into a few steps. Let's follow these steps:

**1. How to get the width and height of a browser window**

In JavaScript, we use **window.innerWidth** and **window.innerHeight** to get the browser window width and height.
So, we can use the same concept in React too. Because ultimately, React is also a JavaScript library.

**2. Let's use "window.innerWidth" and "window.innerHeight" properties.**

```javascript
App.js

import { useRef } from "react";
import "./App.css";

function App() {
  const windowSize = useRef([
    window.innerWidth,
    window.innerHeight,
  ]);
  return (
    <div className="App">
      <div className="window">
        Width : <span>{windowSize.current[0]}</span>
      </div>
      <div className="window">
        Height : <span>{windowSize.current[1]}</span>
      </div>
    </div>
  );
}
export default App;

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07s3kvwr9tz4zoq2qqsb.png)

Here I used the [useRef](https://react.dev/reference/react/useRef) hook. We know **useRef** is a mutable object, and it doesn't change its value when a component is updated. Also, changing the value of `current` property doesn't make it re-render.

So, if we need the window objects to change when we resize the browser object, [useRef](https://react.dev/reference/react/useRef) won't be the right choice.
So, we have to think: if we resize the window using an event listener, that means the state is changing while resizing, What if we use [useState](https://react.dev/reference/react/useState) to track the state and provide us the value of windows dynamically?
Let's do it in our next step.

**3.Add a resize event listener and [useState](https://react.dev/reference/react/useState) for tracking the state in a custom hook:**


```javascript
useSize.js 

import { useEffect, useState } from "react";
const useSize = () => {
  const [windowSize, setWindowSize] = useState([
    window.innerHeight,
    window.innerWidth,
  ]);

  useEffect(() => {
    const windowSizeHandler = () => {
      setWindowSize([window.innerWidth, window.innerHeight]);
    };
    window.addEventListener("resize", windowSizeHandler);

    return () => {
      window.removeEventListener("resize", windowSizeHandler);
    };
  }, []);

  return windowSize;
};

export default useSize;

```
Let's break down the code step by step.

- 
Let's make a `useSize` [custom hook](https://react.dev/learn/reusing-logic-with-custom-hooks). In this custom hook, we used the built-in react hook [useState](https://react.dev/reference/react/useState), which updates the state variable whenever the window's width and height change.

```javascript
const [windowSize, setWindowSize] = useState([
    window.innerHeight,
    window.innerWidth,
  ]);
```
A return value from [useState] (https://react.dev/reference/react/useState) is an array with the values "windowSize" and "setWindowSize." The state is stored in a variable named "windowSize," and anytime the function "setWindowSize" is invoked, it updates the state.



- [useEffect](https://react.dev/reference/react/useEffect) used for the first re-render and when the dependency changes. But there is no dependency array for our case. So it gets called only once.
For our case, we are adding a resize hook to the [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) method as an action. As I mentioned, there is no dependency array in [useEffect](https://react.dev/reference/react/useEffect), so the callback function executed only once.
**That means an event listener is added to the window resize event during the initial rendering of the component, and it remains active throughout the component's lifecycle.**

```javascript
useEffect(() => {
    const windowSizeHandler = () => {
      setWindowSize([window.innerWidth, window.innerHeight]);
    };
    window.addEventListener("resize", windowSizeHandler);

```

- [removeEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) is used to remove the resize event listener in this cleanup function to prevent memory leaks and unnecessary event handling after the component is removed from the [DOM](https://react.dev/reference/react-dom). 

```javascript
return () => {
      window.removeEventListener("resize", windowSizeHandler);
    };
  
```

- returning the `windowSize` variable to get the `windowSize` when we are going to use this `useSize` custom hook in our different components.

```javascript
return windowSize;
```

**4.Update the App.js file.**
We are importing the `useSize` custom hook in **App.js** and utilising it like other hooks.
useSize() is passed to a variable and uses that variable to fetch the width and height from an array. because the `windowSize` variable is initialised as an array in state.

```javascript
App.js

import useSize from "./useSize";
import "./App.css";

function App() {
  const windowsize = useSize();

  return (
    <div className="App">
      <div className="window">
        Width : <span>{windowsize[0]}</span>
      </div>
      <div className="window">
        Height : <span>{windowsize[1]}</span>
      </div>
    </div>
  );
}
export default App;
```

**5. Hola, we get the output as we expected.😊**
The window's width and height are updated when it's resized.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8acoel1l54weafp0kg6.gif)

**Conclusion** 
By using this hook in a functional component, you can access the current window size as an array and update it automatically whenever the window is resized.

That's All.
It's as easy as eating an ice cream.😋

I hope that was enjoyable.🥳
Happy Coding....👩‍💻

<h2 align="center">Connect me on</h2>

<p align="center">
  <a href="https://www.linkedin.com/in/payalsasmal/"><img alt="LinkedIn" src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white"></a>
  <a href="https://dev.to/payalsasmal"><img alt="Dev.to blog" src="https://img.shields.io/badge/dev.to-payalsasmal?style=for-the-badge&logo=dev.to&logoColor=white"></a>

  <a href="https://payalsasmal.hashnode.dev/"><img alt="Dev.to blog" src="https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white"</a>

  <a href="https://twitter.com/payalsasmal"><img alt="Twitter" src="https://img.shields.io/badge/twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white" ></a>
</p>

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp0fjywubjx6wb39etti.gif)](https://www.buymeacoffee.com/payalsasmal)