Skip to content

Fix reuseMaps infinite loop when reusing into the same container - #2616

Open
mikeyfarina wants to merge 1 commit into
visgl:masterfrom
mikeyfarina:fix/reuse-same-container-loop
Open

mikeyfarina wants to merge 1 commit into
visgl:masterfrom
mikeyfarina:fix/reuse-same-container-loop

Conversation

@mikeyfarina

Copy link
Copy Markdown

Fixes #2613.

With reuseMaps, Mapbox.reuse() moves the pooled map's children from its old container into the mount container with while (oldContainer.childNodes.length > 0) container.appendChild(oldContainer.childNodes[0]). When the two containers are the same DOM node, the loop never terminates and the tab freezes at 100% CPU. That case is reachable whenever the <Map> mount effect re-runs while the DOM survives — React StrictMode's effect replay in development, and back/forward navigation restore (Activity semantics, e.g. Next.js 16 App Router) in production builds.

Changes, applied to all three copies of the pattern (react-mapbox, react-maplibre, mapbox-legacy):

  • reuse() treats oldContainer === container as "already in place" and skips the reparenting.
  • The [mapboxgl-children] cleanup moves from recycle() into reuse()'s different-container branch. Removing it at recycle time broke the same-container case a second way: reuse() returns the same instance, so setMapInstance bails out on Object.is and React never re-inserts the children div it still owns — any plain-JSX map child silently disappeared after the reuse. Removing it only when the DOM is actually moving keeps the surviving React tree intact, and the different-container behavior is unchanged (same removal, later moment).

yarn test: 52 files / 84 tests pass. The react-mapbox version of this change has also been running in production as a vendored patch since 2026-08-27, including a browser regression test that walks map pin → popup → team page → browser back (the sequence that previously froze on the first back-navigation).

https://claude.ai/code/session_01DmN5k333nk7YLAhtyHE8em

@tordans

tordans commented Sep 11, 2026

Copy link
Copy Markdown
Contributor

Do we have or should we have some kind of test file or maybe demo page that shows the error in the different cases before (and fixed after)?

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.

[Bug] reuseMaps: Mapbox.reuse() infinite-loops (tab freeze) when the recycled map's container is the mount container

2 participants