dbeaver/pro#8355 throttle hover and menu showing#4176
Conversation
Wroud
left a comment
There was a problem hiding this comment.
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 |
|
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 |
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