Bug: useEffect() clears timeout immediately after a focus event with StrictMode

[layershifter]

React version: 18.3.1

Steps To Reproduce

1. Navigate with keyboard to "toggle menu", press Enter
2. Notice that a menu is opened, but a tooltip does not exist 🚨

Link to code example: https://stackblitz.com/edit/vitejs-vite-nnvwzvcm

The current behavior

2025-04-24.13.50.07.mp4

Menu:useEffect() // moves focus to MenuItem ✅ 
MenuItem:onFocus() => Tooltip:onFocus() // triggers a setTimeout() to open Tooltip ✅ 
Tooltip:useEffect:dispose() // calls clearTimeout() 🚨

The expected behavior

Without StrictMode a dispose function is not called:

2025-04-24.13.51.24.mp4

---

That's a simplified version of the issue from microsoft/fluentui#34296. I clearly understand that it's not a bug in React. It does what's expected 👍

The correct approach is to fire setTimeout() & clearTimeout() in useEffect(). The problem is that the described pattern is not unique and adopted by component libraries:

• https://github.com/mui/material-ui/blob/ad81de06c384d446d4fc9740a53b692f209165a3/packages/mui-material/src/Tooltip/Tooltip.js#L410-L413
• https://github.com/radix-ui/primitives/blob/e2e0559010cb5e861944ecba840823ae530fa4a8/packages/react/tooltip/src/tooltip.tsx#L205C9-L221
• more...

So we are wondering what is a proper solution in case and looking for guidance in this particular case 🙏

[szhsin]

Just stumbled across this issue. I think you can drop the clearTimeout in the useEffect entirely, since there's no harm in calling setState on an unmounted component.

[rjgotten]

The problem is that the described pattern is not unique and adopted by component libraries.

The pattern itself is problematic and wrong. This is not how you set up a tap-and-hold gesture. The proper way of doing that is to pair touchstart with either of touchend or touchcancel to cancel the pending timer unique to that particular touch.

touchcancel is not supported by Apple's Safari, which isn't really too surprising considering that - iirc - it implements touch events in a way that do not conform to specification, them being the actual original implementation that was reverse engineered by others to inform the creation of the official touch events specification.

pointercancel however is. To implement this gesture pattern you should use a pointerdown event handler that starts a timer which will eventually execute the actual handler body, and which registers event handlers for pointerup and pointercancel which would cancel the timer prematurely. Those would simply be registered in closure scope of the pointerdown handler. And when either event handler is executed, or the timer is hit, they should be unregistered again.

React, and its lifecycles for state management, side effect management, etc. shouldn't even come into the picture.