From 8c436b317a4795ac4014be90775273eb6dc5f696 Mon Sep 17 00:00:00 2001
From: xobotyi <xog3@yandex.ru>
Date: Wed, 30 Jun 2021 23:58:31 +0300
Subject: [PATCH] feat: improve `useEventListener`

React already handles the change inside refs, therefore there is no need
to unwrap it on each render.
---
 src/useEventListener/__tests__/dom.ts    | 3 ++-
 src/useEventListener/useEventListener.ts | 9 ++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/useEventListener/__tests__/dom.ts b/src/useEventListener/__tests__/dom.ts
index 4527d7251..c4403150b 100644
--- a/src/useEventListener/__tests__/dom.ts
+++ b/src/useEventListener/__tests__/dom.ts
@@ -38,8 +38,9 @@ describe('useEventListener', () => {
     const addSpy = jest.spyOn(div, 'addEventListener');
     const removeSpy = jest.spyOn(div, 'removeEventListener');
 
+    const ref = { current: div };
     const { rerender, unmount } = renderHook(() =>
-      useEventListener({ current: div }, 'resize', () => {}, { passive: true })
+      useEventListener(ref, 'resize', () => {}, { passive: true })
     );
 
     expect(addSpy).toHaveBeenCalledTimes(1);
diff --git a/src/useEventListener/useEventListener.ts b/src/useEventListener/useEventListener.ts
index 09ce6c97a..6fb189cb4 100644
--- a/src/useEventListener/useEventListener.ts
+++ b/src/useEventListener/useEventListener.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MutableRefObject, RefObject, useEffect, useMemo } from 'react';
-import { hasOwnProperty } from '../util/misc';
 import { useSyncedRef, useIsMounted } from '..';
 
 type ITargetOrTargetRef<T extends EventTarget> = T | null | RefObject<T> | MutableRefObject<T>;
@@ -19,11 +18,6 @@ export function useEventListener<T extends EventTarget>(
     | Parameters<T['addEventListener']>
     | [string, EventListenerOrEventListenerObject | ((...args: any[]) => any), ...any]
 ): void {
-  // extract current target from ref object
-  const tgt: T =
-    target && hasOwnProperty(target, 'current')
-      ? (target as MutableRefObject<T>).current
-      : (target as T);
   const isMounted = useIsMounted();
 
   // create static event listener
@@ -53,6 +47,7 @@ export function useEventListener<T extends EventTarget>(
   );
 
   useEffect(() => {
+    const tgt = target && 'current' in target ? target.current : target;
     if (!tgt) return undefined;
 
     const restParams = params.slice(2);
@@ -61,5 +56,5 @@ export function useEventListener<T extends EventTarget>(
 
     return () => tgt.removeEventListener(params[0], eventListener, ...restParams);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tgt, params[0]]);
+  }, [target, params[0]]);
 }