Hook doesn't allow element to be null

[bvanderdrift]

I'd like to request that element should be allowed to be null, which makes sure initially there is a not a global event listener, there is no TS problems and the hooks are top-level.

Currently the element parameter typings are defined as

element?: HTMLElement

This causes problems in combination with useRef.

The following example:

const someRef = useRef();
useEventListener("click", onClickHandler, someRef.current);

works but will be listening to the click event on the global parameter initially (since current will be undefined in the first call). For example in the browser between useEffect and useLayoutEffect there will be time that the onClickHandler will be triggered when user clicks anywhere on the page.

A solution would be the have initial value of someRef.current be null but this throws a typescript error.

const someRef = useRef(null);
useEventListener("click", onClickHandler, someRef.current); //Type 'null' is not assignable to type 'HTMLElement | undefined'

One could circumvent this by putting the useEventListener in an if statement:

const someRef = useRef(null);
if(someRef.current !== null){
    useEventListener("click", onClickHandler, someRef.current);
}

But this creates the problem that useEventListener is not a top-level hook anymore which is required.

Therefore I'd suggest element is allowed to be null.

See #17 for the PR with my suggested solution.

[alex-malyita]

Change useEffect to useLayoutEffect

 useLayoutEffect(() => {
   savedHandler.current = handler;
 }, [handler]);