visgl / visgl/react-google-maps
[Bug] InfoWindow flickering on re render (creating several portals?)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 193
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 13
Description
Description
When I open an InfoWindow for the first time, it works fine. But after I update the position (I tested with position, but could be true for other props), I can see the content flickering every time it re renders. It seems to get worse with every position change. If the position changed once, the content will blink once on re render. If position changed twice, content will blink twice and so on.
Maybe it's adding a new portal with every position change? I managed to fix the problem in some cases by using position as key of InfoWindow, which could indicate that something is not being cleaned up properly on props update. The "key" trick doesn't work when headerContent is set.
Steps to Reproduce
This is not the exact same scenario as I described, but it is an easier way to reproduce the same problem. In this case I am using the flickering to trigger an infinite loop: mouse enter -> update state -> flicker -> flicker causes mouse leave -> update state -> flicker -> mouse enter
CodeSandbox example: https://codesandbox.io/p/devbox/marker-issue-forked-kssrss?workspaceId=ws_AJApL5q2Q836HiYdKXszjW
- Click anywhere on the map to open the InfoWindow
- Notice that you can hover over the content elements to change the box color, at least the first time InfoWindow is opened
- Click on another location on the map to move the InfoWindow
- Hovering the elements should now trigger an infinite loop
Environment
- Library version: 1.5.5
- Google maps version: weekly
- Browser and Version: Chrome Version 140.0.7339.133
- OS: MacOS 15.6
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and compare the first InfoWindow render with subsequent position changes. Trace the InfoWindow update and portal lifecycle, including the headerContent case, and verify that repeated updates do not add flicker or trigger the hover-driven loop.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100