Skip to content

dbeaver/pro#8355 throttle hover and menu showing#4176

Merged
sergeyteleshev merged 7 commits intodevelfrom
dbeaver/pro#8355-navigator-hover-perf
Mar 10, 2026
Merged

dbeaver/pro#8355 throttle hover and menu showing#4176
sergeyteleshev merged 7 commits intodevelfrom
dbeaver/pro#8355-navigator-hover-perf

Conversation

@devnaumov
Copy link
Copy Markdown
Member

@devnaumov devnaumov commented Feb 25, 2026

closes 8355

We ve removed the hover state and menu from each node and moved them to the Tree component so performance will be much better in the new Tree.

For now, in old tree, what works best is startTransition, as it makes hover updates non-blocking and does not cause regressions in production on capable devices, since it does not delay state updates with a specific hardcoded timeout

in general, the performance issue is that the hover state changes too quickly, causing the menu to mount and unmount repeatedly, which triggers very heavy calculations. The issue is still reproducible even without the menu, just changing the hover state itself causes the component to re-render a lot. New Tree will not have such problems, we are controlling hover there via css as menu trigger there is not actual menu, but just a button so we can hide it with just css.

before:

CleanShot.2026-03-05.at.00.35.13.mp4

after:

CleanShot.2026-03-05.at.00.35.47.mp4

Copy link
Copy Markdown
Member

@Wroud Wroud left a comment

Choose a reason for hiding this comment

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

i think that maybe we also can check useHover hook implementations in some libraries for reference, i think that removeEventListener also can be debounced to avoid rapid state changes

@devnaumov
Copy link
Copy Markdown
Member Author

i think that maybe we also can check useHover hook implementations in some libraries for reference, i think that removeEventListener also can be debounced to avoid rapid state changes

Yep, I checked, and it’s basically the same as other implementations. We use mouseenter, not mouseover, so it should be fine. qa tested today with a high dpi mouse and could no longer reproduce the issue. I can also see a noticeable performance improvement locally, so the transition should be enough for now

@devnaumov
Copy link
Copy Markdown
Member Author

There was also a major performance problem with the data grid. Locally, when the console was open, React threw a maximum update depth exceeded error.

So, I updated the data grid so it now uses the useHover hook. After this change, when I hover over cells, I can no longer see any difference between production and the local environment, even with the console open

@sergeyteleshev sergeyteleshev merged commit 4b30d10 into devel Mar 10, 2026
10 checks passed
@sergeyteleshev sergeyteleshev deleted the dbeaver/pro#8355-navigator-hover-perf branch March 10, 2026 14:48
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.

5 participants