Writing a Custom useWindowSize React Hook
Tags: react, hooks, javascript, webdev
Published: 2020-04-18 19:48:03

---
title: Writing a Custom useWindowSize React Hook
published: true
description: One of the coolest parts about React Hooks is that you can create your own! In this post, we'll quickly roll our own useWindowSize hook.
tags: react, hooks, javascript, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uo1vdw79hp87jrjln5ys.jpg
---

One of the coolest parts about React Hooks is that you can create your own! In this post, we'll quickly roll our own `useWindowSize` hook.

# What useWindowSize Will Do

Today we're creating the `useWindowSize` custom hook because we'd like to make sure we always have access to our window `innerHeight` and `innerWidth` properties when they change. To do this, we'll tap into the window's `onresize` event listener.

# Writing the Hook

Since we need to maintain the window size information, we'll use `useState` and default it to a two element array consisting of the initial window .

```javascript
const { useState } = React;

function useWindowSize() {
  const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
  return size;
}
```

Of course, this won't be dynamic. To be dynamic, we'll want to use the window resize event handler. Now, we only need to set the event listener once, so we'll do this with a `useEffect` hook with an empty dependency array.

```javascript
const { useEffect, useState } = React;

function useWindowSize() {
  const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
  useEffect(() => {
    const handleResize = () => { 
      setSize([window.innerHeight, window.innerWidth]);
    }
    window.addEventListener("resize", handleResize);
  }, []);
  return size;
}
```

Awesome, so now we've added an event listener and we `setSize` whenever our window is resized.

There's one last thing we need to do: add a _cleanup function_ to our `useEffect` hook to make sure we remove the event listener when our component unmounts.

```javascript
const { useEffect, useState } = React;

function useWindowSize() {
  const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
  useEffect(() => {
    const handleResize = () => { 
      setSize([window.innerHeight, window.innerWidth]);
    }
    window.addEventListener("resize", handleResize);
    // Clean up!
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return size;
}
```

# See It in Action

Our final code and a codepen are below!

```jsx
const { useEffect, useState } = React;

function useWindowSize() {
  const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
  useEffect(() => {
    const handleResize = () => { 
      setSize([window.innerHeight, window.innerWidth]);
    }
    window.addEventListener("resize", handleResize);
    // Clean up!
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return size;
}

const App = () => {
  const [height, width] = useWindowSize();
  return(
    <div className="box">
      <h1>useWindowSize Hook</h1>
      <p>
        height: {height}<br />
        width: {width}
      </p>
    </div>
  );
}
```

{% codepen https://codepen.io/nas5w/pen/BaNzqvd %}