React hook to use as addEventListener in React's functional components

use-event.ts

import { useEffect } from "react";

/**
 * This replaces the need for using window.addEventListener() when using react hooks.
 * You use it in exactly the same way as window.addEventListener().
 *
 * @example
 * useEvent(event, listener, useCapture)
 *
 * @export
 * @template T
 * @param {EventHandler<T>} event
 * @param {(this: Window, ev: WindowEventMap[T]) => any} listener
 * @param {boolean} [passive=false]
 */
export default function useEvent<T extends keyof WindowEventMap>(
	event: T,
	listener: (this: Window, ev: WindowEventMap[T]) => any,
	passive = false,
) {
	useEffect(() => {
		// initiate the event handler
		window.addEventListener(event, listener, passive);

		// this will clean up the event every time the component is re-rendered
		return function cleanup() {
			window.removeEventListener(event, listener);
		};
	}, []);
}

note this will be run on every update, removing the event listeners and adding a fresh one which breaks in ios

Hi @overbyte, perhaps I need to add an empty array on the useEffect

yeh that's how i dealt with it

working is fine only desktop view not working mobile view