[BUG] Layers flashing at old position before getting displayed at correct position

[DavidBruneHL]

Hello everyone!

In our company software we encountered a bug which I afterwards was also able to reproduce in a clean react app, suggesting that the bug actually occurs due to some internal react-laag implementation.

When we load our company software in a browser and hover over an element with a react-laag layer (e.g. tooltip), for a fraction of a second the layer becomes visible in the top left corner of the screen before jumping to its actual position near its element. The same happens when we scroll the page and hover over the element again. The layer flashes at its last rendered location before jumping to the new location. I believe this to happen because the layer gets rendered before its position is updated, thus it starts at position [0, 0] when loading the page and afterwards being visible at its last rendered location. It might also be related to some kind of performance issue as the bug occurs in our company software (where we use quite a few layers on every page) on every hover and in a clean react app very rarely.

How to reproduce: Unfortunately, it's not too easy to reproduce and happens on a random basis.

1. Setup clean react app and install react-laag.
2. Add a single layer, e.g. tooltip.
3. While hovering over the element with the attached tooltip, move the mouse on the element and refresh the page rapidly.
4. On some refreshes the tooltip will flash in the top left corner.

Expected behavior The layer should appear directly at its target location without flashing at its last rendered location.

Browser / OS:

• OS: Windows 10
• Browsers: Chrome (Version 105.0.5195.126), Firefox (Version 105.0), Edge (Version 105.0.1343.42)
• react-laag v2.0.4

Thanks in advance!