Learn how to build a simple and performant React hook for tracking the window size using React hooks and requestAnimationFrame.

This blog post explains how to build a React hook that tracks the window size using React hooks and requestAnimationFrame. It provides code examples and references to why requestAnimationFrame is better than debouncing functions. The post concludes with a link to a gist and repository for further reference.

Building a Performant React Hook for Tracking Window Size

### React/Typescript Code blog

Today I will be describing how to build a simple,
performant React hook for tracking the window size
as the user resizes a window. This approach uses 
`requestAnimationFrame` which places less
burden on your UI thread because it is only
called when the UI needs to be redrawn, instead of
on every resize event.

### Tracking window size with React hooks

Here is an example using React hooks and `requestAnimationFrame`. This also uses pure js without any libraries like lodash,

```typescript
import { useState, useEffect, useCallback } from 'react';

const getSize = () => {
  return { 
    width: window.innerWidth,
    height: window.innerHeight,
  };
};
 
export function useResize() {
 
  const [size, setSize] = useState(getSize());
 
  const handleResize = useCallback(() => {
    let ticking = false;
    if (!ticking) {
      window.requestAnimationFrame(() => {
        setSize(getSize());
        ticking = false;
      });
      ticking = true;
    } 
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
 
  return size;
}
```

Here is a gist showing it in use: [Img.tsx with useResize](https://gist.github.com/prmichaelsen/9282495535281909df09f77e104f24c5). Alternatively, you can see it in my repo [here](https://github.com/prmichaelsen/parm/blob/mainline-v1.0.0/apps/f5/src/app/extern/useResize.ts) for more context.

Some resources on why you should do this instead of debouncing your function:
* [a relevant github pr with good explanation](https://github.com/otalk/hark/pull/24)
* [medium but behind a meme wall](https://javascript.plainenglish.io/better-understanding-of-timers-in-javascript-settimeout-vs-requestanimationframe-bf7f99b9ff9b)
* [an in-depth stackoverflow answer](https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout)

Thank you for coming to my Ted Talk.
