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

Changes from 1 commit
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
10 changes: 9 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,8 @@ export function useEffectEvent<T extends Function>(fn?: T): T {
return f?.(...args);
}, []);
}

export function useEffectEvent<T extends Function>(fn?: T): T {
Copy link
Member

@snowystinger snowystinger Oct 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not really sure why fn was optional.... this is an internal hook for us (not documented), so I think we should probably have it be required, then we can get rid of this extra noop function

let noop = useCallback(() => {}, []);
return useModernEffectEvent(fn ?? noop);
}