[Bug] Dropped frames / bad performance with controller

Description

When using DeckGL with a Mapbox map (maplibre fork), the performance gets bad, there are lot of dropped frames in Chrome FPS meter (red lines). The overall interactivity feels very laggy / sluggish. I mean just panning around with a mouse.

Removing the DeckGL component around results in a super smooth, 60 FPS / no dropped frames behaviour. Chrome FPS meter confirms this, there are no dropped frames.

There are no layers, no state, no interactivity, just panning around with mouse:

    <DeckGL
      initialViewState={{
        longitude: 11,
        latitude: 45,
        zoom: 6,
      }}
      controller={true}
    >
      <Map
        mapLib={maplibregl}
        style={{ width: '100vw', height: '100vh' }}
        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      />
    </DeckGL>

Note: if you are on bleeding edge hardware like M1 Macbooks this might not be visible. Try it on an older Macbook to see it happening.

Flavors

• React
• Python/Jupyter notebook
• MapboxLayer
• GoogleMapsOverlay
• CartoLayer
• DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

Performance should be the same as of using react-map-gl. There should be no dropped frames.

Steps to Reproduce

Bad performance code:

import Map from 'react-map-gl'
import maplibregl from 'maplibre-gl'
import DeckGL from '@deck.gl/react/typed'

export function TestBasic() {
  return (
    <DeckGL
      initialViewState={{
        longitude: 11,
        latitude: 45,
        zoom: 6,
      }}
      controller={true}
    >
      <Map
        mapLib={maplibregl}
        style={{ width: '100vw', height: '100vh' }}
        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      />
    </DeckGL>
  )
}

Good performance code:

export function TestBasic() {
  return (
    <Map
      mapLib={maplibregl}
      style={{ width: '100vw', height: '100vh' }}
      mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
      initialViewState={{
        longitude: 11,
        latitude: 45,
        zoom: 6,
      }}
    />
  )
}

I've just tested a pure code and it gets the same dropped frames / bad performance behaviour as with the Mapbox layer. So it's not related to the Mapbox layer, it seems to be coming from Deck GL. Code below:

const COUNTRIES =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'

function Root() {
  return (
    <DeckGL
      controller={true}
      initialViewState={{
        latitude: 51,
        longitude: 0,
        zoom: 4,
      }}
    >
      <GeoJsonLayer id="base-map" data={COUNTRIES} />
    </DeckGL>
  )
}

Environment

• Framework version: deck.gl@8.8.6, react-map-gl@7.0.18, maplibre-gl@2.1.9, react@17.0.2
• Browser: Chrome 103
• OS: macOS 11.8.6 Big Sur

Logs

Nothing displayed.

Run the provided React reproduction with DeckGL's controller enabled, first comparing it with the direct Map example and then with the pure DeckGL GeoJsonLayer example. Investigate the controller and render path implicated by those comparisons; done means panning no longer causes the reported dropped frames or sluggish interaction in the stated environment.