React-map-gl with globe creates artifacts at high zoom

[SnailBones]

mapbox-gl-js version: Main branch

browser: Tested in Firefox and Chrome

Steps to Trigger Behavior

1. Create an app using react-map-gl and create-react-app
2. Set projection to globe
3. Zoom in until map transitions to Mercator

Screen.Recording.2022-04-01.at.2.18.45.PM.mov

[SnailBones]

This is caused by a de-syncing of projection state between react-map-gl and mapbox-gl-js When the zoom passes the globe-to-mercator transition,map.transform.projection is set by react to be globe when it should be mercator.

Comment here:

  // Mapbox map is stateful.
  // During method calls/user interactions, map.transform is mutated and
  // deviate from user-supplied props.
  // In order to control the map reactively, we shadow the transform
  // with the one below, which reflects the view state resolved from
  // both user-supplied props and the underlying state

[SnailBones]

Fixed by visgl/react-map-gl#1841, fix has already been released.