Продолжаем марафон универсальных утилит на JavaScript, которые я использую от проекта к проекту независимо от стека.

## Base utility
`~/utils/looperFactory.ts`
```ts
type TLooperInstance = {
  start: (cb: () => void) => void;
  stop: () => void;
  restart: (cb: () => void) => void;
}

export const looperFactory = ({
  delay = 10 * 1000, // 10 seconds by default
  isFirstStartRequired = false,
}: {
  delay?: number;
  isFirstStartRequired?: boolean;
}): () => TLooperInstance => {
  let timer: NodeJS.Timeout;
  let wasStopped = false;
  let __counter = 0;

  return () => {
    const start = (cb: () => void) => {
      // console.log('Run');
      if (!wasStopped) {
        if (__counter === 0 && isFirstStartRequired) {
          cb();
        }
        timer = setTimeout(() => {
          // console.log('Looper done and will be restarted.');
          if (cb) { cb(); }
          start(cb);
        }, delay);
        __counter += 1;
      } // else console.log('Not started');
    };
    const stop = () => {
      // console.log('Looper stopped');
      wasStopped = true;
      clearTimeout(timer);
    };
    const restart = (cb: () => void) => {
      stop();
      wasStopped = false;
      __counter = 0;
      start(cb);
    };
    return {
      start, stop, restart
    };
  };
};
```

## Usage in React hook (for example)
К примеру, есть требование отображать индикатор непрочитанных сообщений, но на проекте нет сокетов, зато есть возможность циклически делать запрос в соответствующее API.
```ts
import { useRef, useEffect } from 'react';
import { looperFactory } from '~/utils/looperFactory';

type TProps = {
  activePersonID: string | undefined;
  isAllowed: boolean;
}

export const useFreshNotificationsCount = ({
  activePersonID, isAllowed
}: TProps) => {
  const { fetchDmsNotificationsCount } = useApiService();
  const looperRef = useRef(looperFactory({
    delay: 20 * 1000,
    isFirstStartRequired: true,
  })());

  useEffect(() => {
    if (!isAllowed) {
      looperRef.current.stop();
      return;
    }
    looperRef.current.restart(() => {
      fetchDmsNotificationsCount({
        query: {
          activePersonID, // For example
        },
      })
        .then((_fetcherResponse) => {
          // NOTE: Use data for success case
        })
        .catch((_fetcherErr) => {
          // NOTE: Use erorr case
        });
    });
  }, [activePersonID, isAllowed]);
};
```


looperFactory #jsVanilla #reactHook

## [use-indexeddb by github.com/orgs/hc-oss](https://github.com/hc-oss/use-indexeddb)

Lightweight (1KB gzipped) hook w/ promises for easy IndexedDB access in React ⚓

```shell
yarn add use-indexeddb
```

```tsx
import React from "react";
import setupIndexedDB, { useIndexedDBStore } from "use-indexeddb";

// Database Configuration
const idbConfig = {
  databaseName: "fruity-db",
  version: 1,
  stores: [
    {
      name: "fruits",
      id: { keyPath: "id", autoIncrement: true },
      indices: [
        { name: "name", keyPath: "name", options: { unique: false } },
        { name: "quantity", keyPath: "quantity" },
      ],
    },
  ],
};

const Example = () => {
  useEffect(() => {
    setupIndexedDB(idbConfig)
      .then(() => console.log("success"))
      .catch(e => console.error("error / unsupported", e));
  }, []);

  const { add } = useIndexedDBStore("fruits");

  const insertFruit = () => {
    add({ name: "Mango 🥭", quantity: 2 }).then(console.log);
  };

  return <button onClick={insertFruit}>Insert</button>;
};
```

See also https://github.com/orgs/hc-oss/repositories

⭐ #reactHook use-indexeddb | hc-oss #interested

https://react-spectrum.adobe.com/react-aria/getting-started.html

#reactHooks | react-aria #accessibility

# [MatchMedia](https://www.youtube.com/watch?v=vvieEwYX02c)

## React hook

*Используется для определения типа устройства*

> See also [useMatchMedia hook src](https://codesandbox.io/s/use-match-media-o9kwlj)

<Alert type='info' header='$ yarn add' text='[use-match-media-hook](https://github.com/jepser/use-match-media)' />

### Source
```js
import { useState, useLayoutEffect } from "react";

const queries = [
  "(max-width: 766px)",
  "(min-width: 767px) and (max-width: 1199px)",
  "(min-width: 1200px)"
];

export const useMatchMedia = () => {
  const mediaQueryLists = queries.map((query) => window.matchMedia(query));
  const getValues = () => mediaQueryLists.map((list) => list.matches);
  const [values, setValues] = useState(getValues);

  useLayoutEffect(() => {
    const handler = () => setValues(getValues);

    mediaQueryLists.forEach((list) =>
      list.addEventListener("change", handler));

    return () =>
      mediaQueryLists.forEach((list) =>
        list.removeEventListener("change", handler)
      );
  }, []);

  return ["isMobile", "isTablet", "isDesktop"].reduce(
    (acc, screen, index) => ({
      ...acc,
      [screen]: values[index]
    }),
    {}
  );
};
```

### Usage
```jsx
import { useMatchMedia } from "./hooks";
import "./styles.css";

export default function App() {
  const { isMobile, isTablet, isDesktop } = useMatchMedia();

  console.log(isMobile);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {isMobile && <h2>Hello from mobile</h2>}
      {isTablet && <h2>Hello from tablet</h2>}
      {isDesktop && <h2>Hello from desktop</h2>}
    </div>
  );
}
```

<YoutubePlayer videoId='vvieEwYX02c' />

## Web API
https://developer.mozilla.org/ru/docs/Web/API/Window/matchMedia

```js
if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}
```

#reactHook | useMatchMedia #jsVanilla #webAPI

https://www.youtube.com/watch?v=6i9kusM8Z-E

<Alert type='info' text='See also **[useSearchParams hook](https://reactrouter.com/en/main/hooks/use-search-params)**' />

#reactHook useSearchParamsState | Как сохранять React состояние в URL.

## useWorker hook

- ~~[https://github.com/alewin/useWorker](https://github.com/alewin/useWorker)~~
- **[https://www.npmjs.com/package/worker-fetch-looper](https://www.npmjs.com/package/worker-fetch-looper)** / [original](https://github.com/pravosleva/express-helper/blob/620a55e739a057bacf848664b640a6e3f16b0729/src/frontend.chat/src/common/hooks/useFetchLooper/utils/usePollingWorker/usePollingWorker.tsx)
- **[static worker in CRA + React hooks sample](https://github.com/pravosleva/express-helper/commit/620a55e739a057bacf848664b640a6e3f16b0729)** + [debounce effect](https://github.com/pravosleva/express-helper/commit/05d4fa4823f6a8d5860c3d17d6c7f0432cab2860)

#reactHooks | useWorker

# [useFetch](https://youtu.be/dH6i3GurZW8?t=98)

https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=6565s

https://habr.com/ru/company/ruvds/blog/445276/

#reactHooks | useFetch; Mastering React's useEffect

https://github.com/n1ru4l/use-async-effect

#reactHooks | useAsyncEffect

# Hooks review by Jack Herrington

**[Mastering React Hooks with Typescript](https://www.youtube.com/watch?v=zM_ZiSl2n2E)**
- [Custom hooks](https://www.youtube.com/watch?v=zM_ZiSl2n2E&t=2106s)
- [useMemo](https://www.youtube.com/watch?v=zM_ZiSl2n2E&t=2624s)
- [Components: Exporting Props as an interface](https://www.youtube.com/watch?v=zM_ZiSl2n2E&t=2857s)
- [Components: Generic components using const](https://www.youtube.com/watch?v=zM_ZiSl2n2E&t=3002s)

## react-use

**[github.com/streamich/react-use](https://github.com/streamich/react-use/)**

## [Typescript for React Components From Beginners to Masters](https://www.youtube.com/watch?v=z8lDwLKthr8)

- [Cheatsheet](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbDlIRW4tS3liOFVyN09EelFnTHRWYU94N3M4Z3xBQ3Jtc0trSHFQY2JIajVsb3o2a3NUQU9CekozU0stOTBHQTFtaXlReXNUeEtOOXl3ZEM5THhiMmR6eWFxWTBGWVN3dENvckNSOWFPLWUyQW9YcEhiT3RlaUZYSXROMEptZjkwaUg4RGZ4Ymx1bF9PRzRrb0hwQQ&q=https%3A%2F%2Fgithub.com%2Ftypescript-cheatsheets%2Freact)
- **[Code](https://github.com/jherr/ts-hooks)**

## Etc.

https://usehooks-typescript.com/react-hook/use-interval

🎓 #reactHooks #typescript #JackHerrington

- **[useStickyValue](https://www.joshwcomeau.com/react/persisting-react-state-in-localstorage/)**
- **[useLocalStorage](https://usehooks.com/useLocalStorage/)**
- useEffect & https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

# `useStorage` react hook
`use-storage.ts`
```ts
import { useCallback, useState } from "react";
import { localStorageWrapper, sessionStorageWrapper } from "./storage";
import { useLatest } from "./use-latest";

type AnyFunction = (...args: any[]) => any;

function isFunction(val: unknown): val is AnyFunction {
  return typeof val === "function";
}

export function useLocalStorageState<T>(
  key: string,
  initalValue: T | (() => T)
) {
  const [value, setValue] = useState(() => {
    const savedValue = localStorageWrapper.get<T>(key);

    if (typeof savedValue !== "undefined") {
      return savedValue;
    }

    return isFunction(initalValue) ? initalValue() : initalValue;
  });

  const latestValue = useLatest(value);

  const updateValue = useCallback(
    (newValue: React.SetStateAction<T>) => {
      setValue(newValue);

      const actualValue = isFunction(newValue)
        ? newValue(latestValue.current)
        : newValue;

      localStorageWrapper.set(key, actualValue);
    },
    [key, latestValue]
  );

  return [value, updateValue] as const;
}

export function useSessionStorageState<T>(
  key: string,
  initalValue: T | (() => T)
) {
  const [value, setValue] = useState(() => {
    const savedValue = sessionStorageWrapper.get<T>(key);

    if (typeof savedValue !== "undefined") {
      return savedValue;
    }

    return isFunction(initalValue) ? initalValue() : initalValue;
  });

  const latestValue = useLatest(value);

  const updateValue = useCallback(
    (newValue: React.SetStateAction<T>) => {
      setValue(newValue);

      const actualValue = isFunction(newValue)
        ? newValue(latestValue.current)
        : newValue;

      sessionStorageWrapper.set(key, actualValue);
    },
    [key, latestValue]
  );

  return [value, updateValue] as const;
}
```

`use-latest.ts`
```ts
import { useLayoutEffect, useRef } from "react";

export function useLatest<T>(value: T) {
  const valueRef = useRef(value);

  useLayoutEffect(() => {
    valueRef.current = value;
  }, [value]);

  return valueRef;
}
```

`storage.ts`
```ts
class StorageWrapper {
  private storage?: Storage;

  constructor(type: "local" | "session") {
    try {
      this.storage =
        type === "local" ? window.localStorage : window.sessionStorage;
    } catch (error) {
      console.error(error);
    }
  }

  get length() {
    if (!this.storage) return;

    return this.storage.length;
  }

  get<T>(key: string) {
    if (!this.storage) return;

    try {
      const value = this.storage.getItem(key);

      if (value === null) {
        return;
      }

      return JSON.parse(value) as T;
    } catch (error) {
      console.error(error);
    }
  }

  set(key: string, value: unknown) {
    if (!this.storage) return;

    try {
      const stringValue = JSON.stringify(value);

      this.storage.setItem(key, stringValue);
    } catch (error) {
      console.error(error);
    }
  }

  remove(key: string) {
    if (!this.storage) return;

    this.storage.removeItem(key);
  }

  clear() {
    if (!this.storage) return;

    this.storage.clear();
  }
}

export const localStorageWrapper = new StorageWrapper("local");
export const sessionStorageWrapper = new StorageWrapper("session");
```

#useStickyValue #useLocalStorage #reactHook

https://github.com/jherr/fast-react-context/blob/main/fast-context-generic/src/App.tsx

Usage in `App.tsx`
```tsx
import createFastContext from "./createFastContext";

const { Provider, useStore } = createFastContext({
  first: "",
  last: "",
});

const TextInput = ({ value }: { value: "first" | "last" }) => {
  const [fieldValue, setStore] = useStore((store) => store[value]);
  return (
    <div className="field">
      {value}:{" "}
      <input
        value={fieldValue}
        onChange={(e) => setStore({ [value]: e.target.value })}
      />
    </div>
  );
};

const Display = ({ value }: { value: "first" | "last" }) => {
  const [fieldValue] = useStore((store) => store[value]);
  return (
    <div className="value">
      {value}: {fieldValue}
    </div>
  );
};

const FormContainer = () => {
  return (
    <div className="container">
      <h5>FormContainer</h5>
      <TextInput value="first" />
      <TextInput value="last" />
    </div>
  );
};

const DisplayContainer = () => {
  return (
    <div className="container">
      <h5>DisplayContainer</h5>
      <Display value="first" />
      <Display value="last" />
    </div>
  );
};

const ContentContainer = () => {
  return (
    <div className="container">
      <h5>ContentContainer</h5>
      <FormContainer />
      <DisplayContainer />
    </div>
  );
};

function App() {
  return (
    <Provider>
      <div className="container">
        <h5>App</h5>
        <ContentContainer />
      </div>
    </Provider>
  );
}

export default App;
```

`createFastContext.ts`
```ts
import React, {
  useRef,
  createContext,
  useContext,
  useCallback,
  useSyncExternalStore,
} from "react";

export default function createFastContext<Store>(initialState: Store) {
  function useStoreData(): {
    get: () => Store;
    set: (value: Partial<Store>) => void;
    subscribe: (callback: () => void) => () => void;
  } {
    const store = useRef(initialState);

    const get = useCallback(() => store.current, []);

    const subscribers = useRef(new Set<() => void>());

    const set = useCallback((value: Partial<Store>) => {
      store.current = { ...store.current, ...value };
      subscribers.current.forEach((callback) => callback());
    }, []);

    const subscribe = useCallback((callback: () => void) => {
      subscribers.current.add(callback);
      return () => subscribers.current.delete(callback);
    }, []);

    return {
      get,
      set,
      subscribe,
    };
  }

  type UseStoreDataReturnType = ReturnType<typeof useStoreData>;

  const StoreContext = createContext<UseStoreDataReturnType | null>(null);

  function Provider({ children }: { children: React.ReactNode }) {
    return (
      <StoreContext.Provider value={useStoreData()}>
        {children}
      </StoreContext.Provider>
    );
  }

  function useStore<SelectorOutput>(
    selector: (store: Store) => SelectorOutput
  ): [SelectorOutput, (value: Partial<Store>) => void] {
    const store = useContext(StoreContext);
    if (!store) {
      throw new Error("Store not found");
    }

    const state = useSyncExternalStore(
      store.subscribe,
      () => selector(store.get()),
      () => selector(initialState),
    );

    return [state, store.set];
  }

  return {
    Provider,
    useStore,
  };
}
```

#reactHook #JackHerrington | createFastContext

#reactHook | experimental_use; fetching based on props #JackHerrington

https://www.youtube.com/watch?v=jpMgcJQAN0c

#reactHook | document.title refresh hook #useDocumentTitle

BRIEF: How to disable document body scroll by hook

## Hook

This hook was created for have ability to disable document body scroll. When modal window is active for example.
```js
// useUnscrolledBody.ts

import { useState, useEffect } from 'react'

export const useUnscrolledBody = (initialShouldBodyUnscrolled: boolean) => {
  const [isBodyUnscrolled, setIsBodyUnscrolled] = useState(initialShouldBodyUnscrolled)

  useEffect(() => {
    if (!!window?.document) {
      if (isBodyUnscrolled) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = 'auto'
      }
    }
  }, [isBodyUnscrolled])

  return {
    isBodyUnscrolled,
    handleBlockScrollBody: (isModalOpened: boolean) => setIsBodyUnscrolled(isModalOpened),
  }
}
```

## Usage example

So, you can use hook like this:
```js
// TestPage.tsx (with modal window)

import { Modal } from '@/ui-kit'
import { useUnscrolledBody } from '@/hooks/useUnscrolledBody'

export const TestPage: React.FC = (props) => {
  const [isModalActive, setIsModalActive] = useState(false)
  const { handleBlockScrollBody } = useUnscrolledBody(false)
  const handleHideModal = useCallback(() => {
    setIsModalActive(false)
    handleBlockScrollBody(false)
  }, [])
  const handleShowModal = useCallback(() => {
    if (!!window) {
      window.scrollTo({
        top: 0,
        behavior: 'auto',
      })
    }
    handleBlockScrollBody(true)
    setIsModalActive(true)
  }, [])

  return (
    <>
      <button onClick={handleShowModal}>
        Show Modal
      </button>
      {isModalActive && (
        <Modal
          onCloseClick={handleHideModal}
          title="Title"
          text="Text"
        />
      )}
    </>
  )
}
```
Easy 👌

#reactHook `useUnscrolledBody` [2020-07-01]

https://github.com/rehooks/document-visibility

#reactHook document-visibility

#reactHook online-status

https://github.com/rehooks/document-title

#reactHook | document-title

#reactHook window-size

https://github.com/rehooks/network-status

#reactHook network-status

https://github.com/rehooks/window-scroll-position

#reactHook window-scroll-position

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

#reactHook | useInterval

https://www.youtube.com/watch?v=fNRQOT2LEnw

#reactHook | useDebouncedEffect useThrottledEffect

#reactHook | getGPS

- [useLocation from react-router-dom](https://surajsharma.net/blog/current-url-in-react)

#reactHook useLocation

```js
import {useEffect, useState} from "react";

export const useWebSockets = () => {
    const [state, setState] = useState([]);

    useEffect(() => {
        const ws = new WebSocket("ws://localhost:8889");

        ws.onopen = () => {
            console.log("open");
        };

        ws.onclose = () => {
            console.log("closed");
        };

        ws.onmessage = (msg) => {
            const dataMsg = JSON.parse(msg.data)
            if (dataMsg.hasOwnProperty('tick')) {
                setState((prev)=> [...prev, dataMsg.tick])
            }
            return null
        };

        return () => {
            ws.close();
        };
    }, []);

    return state
}
```

#reactHook | useWebSockets

https://github.com/pravosleva/express-helper/commit/eb7524f38eed5817d1a4cb78eb4472366c8dbaad

#reactHook | useDeepEffect

https://www.youtube.com/watch?v=Y1SekvuZ3M4

```jsx
function useOutsideClick(elmRef, handler, isAttached = true) {
  // NOTE: Special tool for additional memoization
  const latestHandler = useLatest(handler)
  useEffect(() => {
    if (isAttached) return
    const handleClick = () => {
      if (!elmRef.current) return;
      if (!elmRef.current.contains(e.target)) {
        latestHandler.current()
      }
    }
    document.addEventListener('click', handleClick)
    return () => {
      document.removeEventListener('click', handleClick)
    }
  }, [elmRef, latestHandler, isAttached])
}

// USAGE:
const tooltipRef = useRef(null)
useOutsideClick(tooltipRef, onClose, isOpened)

<div ref={tooltipRef}>Tooltip tst</div>
```

`~/common/hooks/useLatest`
```js
import { useRef, useLayoutEffect } from 'react'

export const useLatest = (value: string) => {
  const valueRef = useRef<string>(value)

  useLayoutEffect(() => {
    valueRef.current = value
  }, [value])

  return valueRef
}
```

#reactHook | useOutsideClick #useLatest

https://www.youtube.com/watch?v=--qf6YZsZcE

#reactHook Продвинутая мемоизация с useRef | React Hooks - useLatest

https://www.youtube.com/watch?v=8WnGNId62h8

#reactHook | useTransition

https://github.com/n8tb1t/use-scroll-position/blob/master/src/useIsomorphicLayoutEffect.tsx

#reactHook | useWindowSize

```jsx
const FocusDemo = () => {
  const [inputRef, setInputFocus] = useFocus()

  return (
    <> 
      <button onClick={setInputFocus} >
        FOCUS
      </button>
      <input ref={inputRef} />
    </>
  )
}
const useFocus = () => {
  const htmlElRef = useRef(null)
  const setFocus = () => {
    htmlElRef.current &&  htmlElRef.current.focus()
  }

  return [htmlElRef, setFocus]
}
```

#reactHooks | useFocus

#reactHooks | useSorted

https://github.com/Dema/final-form-validations

#reactHooks | final-form-validations

```tsx
import { useState, useEffect } from 'react';
import { useDebounce } from '~/common/hooks/useDebounce';

export interface IWindowDims {
  pageYOffset: number;
}

function isItMoreThan2Screens(): boolean {
  const { innerHeight, pageYOffset } = window;
  return innerHeight * 2 - pageYOffset < 0;
}

export const useScrollPosition = (): [IWindowDims, boolean] => {
  const [scrollPosition, setScrollPosition] = useState<IWindowDims>({
    pageYOffset: 0,
  });
  const [isMoreThan2Screens, setIsMoreThan2Screens] = useState<boolean>(false);

  const debouncedCurrentHeight = useDebounce(scrollPosition?.pageYOffset, 150);

  useEffect(() => {
    function handleScroll() {
      setScrollPosition({ pageYOffset: !!window ? window.pageYOffset : 0 });
    }

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    setIsMoreThan2Screens(isItMoreThan2Screens());
  }, [debouncedCurrentHeight, setIsMoreThan2Screens]);

  return [scrollPosition, isMoreThan2Screens];
};
```

#reactHooks | useScrollPosition

https://www.robinwieruch.de/react-hooks-fetch-data

#reactHooks | How to fetch data with React Hooks?

https://github.com/vivek12345/react-polling-hook

#reactHooks | usePolling

```js
import { useMemo, useEffect } from 'react'
import {
  useParams,
  useLocation,
  useHistory,
  useRouteMatch,
} from 'react-router-dom'
import queryString from 'query-string'

export function useRouter() {
  const params = useParams()
  const location = useLocation()
  const history = useHistory()
  const match = useRouteMatch()

  return useMemo(() => {
    return {
      push: history.push,
      replace: history.replace,
      pathname: location.pathname,
      query: {
        ...queryString.parse(location.search),
        ...params,
      },
      match,
      location,
      history,
    }
  }, [params, match, location, history])
}
```

> See also: https://github.com/pravosleva/my-remont-2020-frontend.demo/blob/main/src/common/hooks/useRouter.tsx

#reactHooks #cra #useRouter | Custom hook for react-router-dom

https://habr.com/ru/articles/746806/

**[react-hook-form sample](https://github.com/jherr/fast-refresh-form/blob/master/src/App.js)**

https://github.com/jherr/fast-refresh-form/blob/master/src/App.js

https://www.youtube.com/watch?v=VbUmKm6gjtc&t=5s

See also tools from https://mantine.dev

#reactHooks #useForm | hook form

**[The BEST Way To Create Forms In React - React Hook Form Tutorial - How To Create Forms In React](https://www.youtube.com/watch?v=bU_eq8qyjic)**

[https://github.com/Archakov06/react-hooks-tutorial](https://github.com/Archakov06/react-hooks-tutorial)

#reactHooks | About

See also: https://usehooks.com/useWindowSize/

```js
import { useState, useEffect } from 'react';

interface IResult {
  width: number | undefined;
  height: number | undefined;
}

export function useWindowSize() {
  // Initialize state with undefined width/height so server and client renders match
  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/

  const [windowSize, setWindowSize] = useState<IResult>({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    function handleResize() {
      // Set window width/height to state
      setWindowSize({
        width: window?.innerWidth,
        height: window?.innerHeight,
      });
    }

    // Handler to call on window resize
    if (typeof window !== 'undefined') {
      // Add event listener
      window.addEventListener('resize', handleResize);

      // Call handler right away so state gets updated with initial window size
      handleResize();
    }

    // Remove event listener on cleanup
    return () => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('resize', handleResize);
      }
    };
  }, []); // Empty array ensures that effect is only run on mount

  return windowSize;
}
```

reactHook