Skip to content

feat: support modern useEffectEvent #9095

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+11 −3
Open

feat: support modern useEffectEvent #9095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aa282da
feat: support modern useEffectEvent
nwidynski Oct 26, 2025
58b2af9
chore: require callback
nwidynski Oct 26, 2025
672e8ee
fix: backwards compatibility
nwidynski Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/@react-aria/utils/src/useEffectEvent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<T extends Function>(fn?: T): T {
// Starting with React 19.2, this hook has been internalized.
const useModernEffectEvent = React['useEffectEvent'] ?? useLegacyEffectEvent;

function useLegacyEffectEvent<T extends Function>(fn?: T): T {
const ref = useRef<T | null | undefined>(null);
useEarlyEffect(() => {
ref.current = fn;
Expand All @@ -28,3 +31,7 @@ export function useEffectEvent<T extends Function>(fn?: T): T {
return f?.(...args);
}, []);
}

export function useEffectEvent<T extends Function>(fn: T): T {
return useModernEffectEvent(fn);
}
5 changes: 3 additions & 2 deletions packages/@react-aria/utils/src/useEvent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<K extends keyof GlobalEventHandlersEventMap>(
Expand All @@ -20,7 +20,8 @@ export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
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(() => {
Expand Down