After React 19.2 introduceduseEffectEvent I decided to investigate why we're usinguseEventCallback (which is a broader version of it without linting restrictions) to see how we could migrate to it or why the React team chose to keep it restricted.

Firstly, I removed most instances where it's truly unnecessary as no memoization is occurring.

Secondly, I found various use cases where it directly matchesuseEffectEvent's intended purpose — an event handler that's invoked inside an effect. Or in one special case, used to stabilize a function used as a dependency of an effect.

The use cases I found that are broader than the hook's intended purpose:

Using a callback ref where specifying the dependencies is unnecessary, especially for complex ref callbacks that don't need reactivity
Reusable event handlers that are forwarded through contexts or memoized groups of props where memoization is a must - nothing that's called during render and needs reactivity
A tiny DX improvement where it just turns anundefined value into a NOOP function

We also haveuseLatestRef, which is a non-function version of making an "untracked" helper. Most other libraries provide this built-in:https://x.com/rickhanlonii/status/1974118493185540588.

If the React team weren't wary of wholesale turning off reactivity for something (other libraries provide this already),useEffectEvent could've been calleduseUntracked to have the broadest set of use cases.

useEffectEvent also allows you to access non-reactive non-function values since it respects return values:

constexternalProp={};constgetProp=React.useEffectEvent(()=>externalProp);React.useEffect(()=>{constprop=getProp();},[]);

AuseUntracked helper that handles all non-reactive values simultaneously, merginguseLatestRef anduseEventCallback together, needs an overloaded return value, which is probably not as neat as just renaminguseEventCallback to something similar touseEffectEvent but allowing us to bypass its restrictive lint rule to solve our broader use cases (outlined above in the ordered list)

@romgrk

'use client';import{useEventCallback}from'./useEventCallback';import{useLatestRef}from'./useLatestRef';typeCallback=(...args:any[])=>any;/** * Non-reactive storage for any value. * - If `value` is a function, returns a stable callable that always uses the latest implementation. * - Otherwise, returns a `RefObject` object whose `.current` is kept in sync with the latest value. */exportfunctionuseUntracked<TextendsCallback>(value:T|undefined|null):T;exportfunctionuseUntracked<T>(value:T):React.RefObject<T>;exportfunctionuseUntracked(value:unknown):unknown{constisFunction=typeofvalue==='function';constcallable=useEventCallback(isFunction ?value :undefined);constlatestRef=useLatestRef(isFunction ?undefined :value);returnisFunction ?callable :latestRef;}

IfuseUntrackedonly returned function values and respected return values, that could work nicely. We could removeuseLatestRef as a utility in this case.

atomiks added the internalBehind-the-scenes enhancement. Formerly called “core”. label

Oct 4, 2025

Copy link

pkg-pr-newbot commentedOct 4, 2025•
edited
Loading

vite-css-base-ui-example

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@2917

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@2917

commit:b1e61d1

Copy link

netlifybot commentedOct 4, 2025•
edited
Loading

✅ Deploy Preview forbase-ui ready!

Name	Link
🔨 Latest commit	`b1e61d1`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/68e61f968216b00008a48865
😎 Deploy Preview	https://deploy-preview-2917--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to yourNetlify project configuration.

Copy link

mui-bot commentedOct 4, 2025•
edited
Loading

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui-components/react	▼-116B^(-0.03%)	▼-36B^(-0.03%)

Details of bundle changes

atomiks force-pushed therefactor/remove-use-event-callback branch fromae1f9f5 to79b332dCompare

October 4, 2025 06:29

[internal] Remove unneeded useEventCallback usage

2da7ddf

atomiks force-pushed therefactor/remove-use-event-callback branch from79b332d to2da7ddfCompare

October 4, 2025 06:32

[internal] Remove unneeded useEventCallback usage

cd27d1a

github-actionsbot added the PR: out-of-dateThe pull request has merge conflicts and can't be merged. label

Oct 6, 2025

romgrk reviewed

Oct 6, 2025

View reviewed changes

packages/react/src/composite/list/CompositeList.tsx

Comment on lines -16 to +18

		const{ children, elementsRef, labelsRef, onMapChange}=props;
		const{ children, elementsRef, labelsRef,onMapChange:onMapChangeProp}=props;

		constonMapChange=useEventCallback(onMapChangeProp);

Copy link

Contributor

romgrkOct 6, 2025

Choose a reason for hiding this comment

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

Why is this change beneficial?

Copy link

ContributorAuthor

atomiksOct 7, 2025

Choose a reason for hiding this comment

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

It aligns with what theuseEffectEvent linter wants

romgrk reviewed

Oct 6, 2025

View reviewed changes

packages/react/src/checkbox-group/CheckboxGroup.tsx

Comment on lines -78 to +83

		constregisterControlRef=useEventCallback((element:HTMLButtonElement\|null)=>{

		constregisterControlRef=React.useCallback((element:HTMLButtonElement\|null)=>{
		if(controlRef.current==null&&element!=null&&!element.hasAttribute(PARENT_CHECKBOX)){
		controlRef.current=element;
		}
		});
		},[]);

Copy link

Contributor

romgrkOct 6, 2025

Choose a reason for hiding this comment

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

Why is this changed?useEventCallback makes the intent more clear and is more performant.

Copy link

ContributorAuthor

atomiksOct 7, 2025

Choose a reason for hiding this comment

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

@michaldudak wrote thatuseCallback can be more performant

#2336 (comment)

Copy link

Contributor

romgrkOct 7, 2025

Choose a reason for hiding this comment

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

It makes sense now that I re-read the source code,useEventCallback has to deal with init/render cycles. We could add something likeuseUntrackedCallback (name tbd) as a version ofReact.useCallback for functions without tracked dependencies like this one.

romgrk reviewed

Oct 6, 2025

View reviewed changes

packages/react/src/utils/useOpenInteractionType.ts

Comment on lines -25 to +27

		constreset=useEventCallback(()=>{
		constreset=React.useCallback(()=>{
		setOpenMethod(null);
		});
		},[]);

Copy link

Contributor

romgrkOct 6, 2025

Choose a reason for hiding this comment

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

Idem, why move touseCallback?

Copy link

Contributor

romgrk commentedOct 6, 2025

to see how we could migrate to it or why the React team chose to keep it restricted

The React team often makes decisions that align mostly with Meta's internal needs, and they've stopped putting much effort & thought into the external DX (which the react-hooks eslint package is part of). I wouldn't read too much into why they took that decision.

A useUntracked helper that handles all non-reactive values simultaneously, merging useLatestRef and useEventCallback together

The code example you listed does runtime type detection and calls bothuseEventCallback anduseLatestRef each time it's used - this is unefficient. Calling react hooks is not a free operation, there is a runtime cost to be paid. And usually, runtime type detection is a code smell. There's two different use-cases, there is no need to merge them in a single hook. At most, we could rename them to highlight their similarities in behavior, but merging them muddles their type signature and return valule (refs & callbacks are fairly different types of values) and affects performance.

Copy link

ContributorAuthor

atomiks commentedOct 7, 2025

@romgrk yeah the overload isn't great, which is why I wrote aboutuseEffectEvent being able to return values.

What do you think about renaminguseEventCallback touseUntracked to better indicate it can return values and be used for that case overuseLatestRef? It will still only return functions, but you can call them inside effects (similar to accessing refs)

constcallback=useUntracked(()=>{});constgetValue=useUntracked(()=>prop);

Merge branch 'master' into refactor/remove-use-event-callback

a52b7e7

Signed-off-by: atomiks <cc.glows@gmail.com>

github-actionsbot removed the PR: out-of-dateThe pull request has merge conflicts and can't be merged. label

Oct 7, 2025

Copy link

Contributor

romgrk commentedOct 7, 2025

What do you think about renaminguseEventCallback touseUntracked

I think that name is confusing. The "callback" token is fairly important semantically. I would instead suggestuseLatestCallback, though I'm not sure renaming it is worth it.

Copy link

ContributorAuthor

atomiks commentedOct 7, 2025•
edited
Loading

@romgrk it's the term used to turn off reactivity in every other library (Svelte, Solid, Preact, Angular, Vue, ...).
Here's a big thread with them all:https://x.com/rickhanlonii/status/1974118493185540588

It's just that returning values fromuseEffectEvent (oruseEventCallback) seems weird as they seem like they should just fire side-effects alone. I was never a big fan of the term "latest", though.

The "callback" token is fairly important semantically

Somewhat, butuseEffectEvent returns a function even though an "event" is typically an object, so I guess it's not critical. I could live withuseUntrackedCallback but I like shorter names (and since it only ever accepts a function as a param, it seems unnecessary as the return value matches the input. It's intuitive that callinguseUntracked will untrack the function passed).

lint

c8360ac

atomiks marked this pull request as ready for review

October 7, 2025 05:22

atomiks requested review fromcolmtuite andmichaldudak ascode owners

October 7, 2025 05:23

github-actionsbot added the PR: out-of-dateThe pull request has merge conflicts and can't be merged. label

Oct 7, 2025

Merge remote-tracking branch 'upstream/master' into refactor/remove-u…

7b1e9ec

…se-event-callback

github-actionsbot removed the PR: out-of-dateThe pull request has merge conflicts and can't be merged. label

Oct 8, 2025

mnajdova reviewed

Oct 8, 2025

View reviewed changes

Copy link

Member

mnajdova left a comment

Choose a reason for hiding this comment

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

Can we document theuseEffectEvent and explain when it should be used? To have at least some kind of guidelines for other contirbutors.

packages/react/src/switch/root/SwitchRoot.tsxShow resolvedHide resolved

packages/react/src/slider/control/SliderControl.tsxShow resolvedHide resolved

Copy link

ContributorAuthor

atomiks commentedOct 8, 2025

Can we document the useEffectEvent and explain when it should be used? To have at least some kind of guidelines for other contirbutors.

I was going to do this in a new PR. This one doesn't create any new hooks/utils yet, just cleans up the code.

remove RadioRoot memo

b1e61d1

mnajdova approved these changes

Oct 8, 2025

View reviewed changes

Copy link

Member

mnajdova left a comment

Choose a reason for hiding this comment

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

Changes make sense 👌 I haven't check the whole codebase to find other occurences, but if there is anything missed we can potentially fix those afterwards.

atomiks merged commit1f62103 intomui:master

Oct 8, 2025

20 checks passed

atomiks deleted the refactor/remove-use-event-callback branch

October 8, 2025 09:47

Labels

internal

Behind-the-scenes enhancement. Formerly called “core”.

Movatterモバイル変換

Uh oh!

[internal] Remove unneededuseEventCallback usage#2917

[internal] Remove unneededuseEventCallback usage#2917

Uh oh!

Conversation

atomiks commentedOct 4, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

pkg-pr-newbot commentedOct 4, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

netlifybot commentedOct 4, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

✅ Deploy Preview forbase-ui ready!

Uh oh!

mui-bot commentedOct 4, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Bundle size report

Uh oh!

romgrkOct 6, 2025

Choose a reason for hiding this comment

Uh oh!

atomiksOct 7, 2025

Choose a reason for hiding this comment

Uh oh!

romgrkOct 6, 2025

Choose a reason for hiding this comment

Uh oh!

atomiksOct 7, 2025

Choose a reason for hiding this comment

Uh oh!

romgrkOct 7, 2025

Choose a reason for hiding this comment

Uh oh!

romgrkOct 6, 2025

Choose a reason for hiding this comment

Uh oh!

romgrk commentedOct 6, 2025

Uh oh!

atomiks commentedOct 7, 2025

Uh oh!

romgrk commentedOct 7, 2025

Uh oh!

atomiks commentedOct 7, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

mnajdova left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

atomiks commentedOct 8, 2025

Uh oh!

mnajdova left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[internal] Remove unneeded`useEventCallback` usage#2917

[internal] Remove unneeded`useEventCallback` usage#2917

atomiks commentedOct 4, 2025•
edited
Loading

pkg-pr-newbot commentedOct 4, 2025•
edited
Loading

netlifybot commentedOct 4, 2025•
edited
Loading

mui-bot commentedOct 4, 2025•
edited
Loading

atomiks commentedOct 7, 2025•
edited
Loading