Any downsides to having DeckGL as child of ReactMapGL?

Hello,

I have two questions that I’d like your thoughts on.

1. Is there any downside to mounting the <DeckGL /> component as a child of the ReactMapGL component? In the documentation it shows the other way. This is my current setup and it’s working but I didn’t know if there were any downsides.

   <ReactMapGL
     touchAction="pan-y"
     onInteractionStateChange={this.updateInteractionState}
     attributionControl={false}
     controller={this._mapController}
     {...this.props.viewport}
     preventStyleDiffing
     reuseMaps
     width="100%"
     height="100%"
     onError={this._onReactMapGLError}
     getCursor={this.getCursor}
     interactiveLayerIds={this.props.interactiveLayerIds}
     mapStyle={this.props.mapStyleURI.length > 0 ? this.props.mapStyleURI : this.props.baseLayer}
     mapboxApiAccessToken={this.props.mapboxAccessToken}
     onLoad={this._onMapLoad}
     transformRequest={this._transformRequest}
     onViewportChange={this._onViewportChange}
     onClick={this._onClick}
   >
     <DeckGL viewState={this.props.viewport} getCursor={this._handleDeckGLCursor} {...this.props.deckProps} />
   </ReactMapGL>
   

2. Is it ok to mount multiple <DeckGL> components in the same project? Would this be ok?

   <>
     <DeckGL layers={...} />
     <DeckGL layers={...} />
   </>
   

Thank you in advance for any thoughts on this!

[Pessimistress]

Using DeckGL as a child of ReactMapGL should work. In our docs we recommend StaticMap as a child of DeckGL because:

• It is easier to use the stateful map controller that way (instead of callback + state update). Managing view states in your own app results in more React rerenders, and potential perf issues if not written properly.
• It avoids creating two sets of pointer event managers, one in DeckGL and one in ReactMapGL.

As @kylebarron said, if your two DeckGL instances renders to the same region, it is more performant to use multiple views. Otherwise, rendering two DeckGL instances is fine. If you have more than two, say 5-6, the hardware/browser may not support so many active WebGL contexts at once.

[kylebarron]

• When you have ReactMapGL as the child, you can use StaticMap, which is more performant
• You can pass through map state to use Mapbox style components like the zoom in/out button
• You could mount multiple DeckGL components but there’s almost never a reason to do that. You can use multiple views for a side by side setup