visgl / visgl/react-google-maps

[Bug] InfoWindow flickering on re render (creating several portals?)

Open
#832 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.