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..82d620d9b 100644 --- a/src/useEventListener/useEventListener.ts +++ b/src/useEventListener/useEventListener.ts @@ -1,9 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { MutableRefObject, RefObject, useEffect, useMemo } from 'react'; +import { RefObject, useEffect, useMemo } from 'react'; +import { useIsMounted, useSyncedRef } from '..'; import { hasOwnProperty } from '../util/misc'; -import { useSyncedRef, useIsMounted } from '..'; - -type ITargetOrTargetRef = T | null | RefObject | MutableRefObject; /** * Subscribes an event listener to the target, and automatically unsubscribes @@ -14,16 +12,11 @@ type ITargetOrTargetRef = T | null | RefObject | Mutab * it is `[eventName, listener, options]`. */ export function useEventListener( - target: ITargetOrTargetRef, + target: RefObject | T | null, ...params: | Parameters | [string, EventListenerOrEventListenerObject | ((...args: any[]) => any), ...any] ): void { - // extract current target from ref object - const tgt: T = - target && hasOwnProperty(target, 'current') - ? (target as MutableRefObject).current - : (target as T); const isMounted = useIsMounted(); // create static event listener @@ -53,6 +46,7 @@ export function useEventListener( ); useEffect(() => { + const tgt = target && hasOwnProperty(target, 'current') ? target.current : target; if (!tgt) return undefined; const restParams = params.slice(2); @@ -61,5 +55,5 @@ export function useEventListener( return () => tgt.removeEventListener(params[0], eventListener, ...restParams); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [tgt, params[0]]); + }, [target, params[0]]); }