Skip to content
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.

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

feat: Tooltip - Performance - avoid calling clearTimeout on unmount if timeout id is 0 #3163

Merged

Conversation

carloseustaquio
Copy link
Contributor

@carloseustaquio carloseustaquio commented Oct 2, 2024

Description

Context:

We have a product list page with products with multiple color variants. These color variants have the Tooltip component to display the color name on hover.

Issue:

We have noticed a significant amount of clearTimeout calls when the component with the Tooltips unmounts. That's interesting because it happens even when we don't trigger any of the Tooltips in the page.

6f5c359a-9b20-4739-82e8-41b2c0e2a1d8

After some investigation, we noticed this is caused by a window.clearTimeout that's happening in the component unmount.

Fix:

The fix proposed is quite simple. I'm checking openTimerRef.current and only calling this if it's not 0. I'm also resetting openTimerRef.current to 0 after each clearTimeout(). We have noticed a reduction in the number of clearTimeout calls in the unmount of this component. This means a significant performance improvement in our scenario given we have dozens of Tooltips in some of our pages.

4ef24b80-ef0b-4659-a354-bec155e0e8cc

@chaance chaance merged commit db6267a into radix-ui:main Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants