diff --git a/packages/@react-aria/utils/src/useEffectEvent.ts b/packages/@react-aria/utils/src/useEffectEvent.ts index 20b89d03038..f5046d525d3 100644 --- a/packages/@react-aria/utils/src/useEffectEvent.ts +++ b/packages/@react-aria/utils/src/useEffectEvent.ts @@ -17,7 +17,10 @@ import {useLayoutEffect} from './useLayoutEffect'; // before all layout effects, but is available only in React 18 and later. const useEarlyEffect = React['useInsertionEffect'] ?? useLayoutEffect; -export function useEffectEvent(fn?: T): T { +// Starting with React 19.2, this hook has been internalized. +const useModernEffectEvent = React['useEffectEvent'] ?? useLegacyEffectEvent; + +function useLegacyEffectEvent(fn?: T): T { const ref = useRef(null); useEarlyEffect(() => { ref.current = fn; @@ -28,3 +31,7 @@ export function useEffectEvent(fn?: T): T { return f?.(...args); }, []); } + +export function useEffectEvent(fn: T): T { + return useModernEffectEvent(fn); +} diff --git a/packages/@react-aria/utils/src/useEvent.ts b/packages/@react-aria/utils/src/useEvent.ts index 1dd35499847..c83b479e614 100644 --- a/packages/@react-aria/utils/src/useEvent.ts +++ b/packages/@react-aria/utils/src/useEvent.ts @@ -11,7 +11,7 @@ */ import {RefObject} from '@react-types/shared'; -import {useEffect} from 'react'; +import {useCallback, useEffect} from 'react'; import {useEffectEvent} from './useEffectEvent'; export function useEvent( @@ -20,7 +20,8 @@ export function useEvent( handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any, options?: boolean | AddEventListenerOptions ): void { - let handleEvent = useEffectEvent(handler); + let noop = useCallback(() => {}, []); + let handleEvent = useEffectEvent(handler ?? noop); let isDisabled = handler == null; useEffect(() => {