In my application, I have a Map component that tracks viewport state and sets some common properties, and other components simply provide the deck.gl layers to display on the map:

class Map extends React.Component {
  ...
  render() {
    return (
      <MapGL {...this.state.vp} {...this.state.size} onViewportChange={vp => this.setState({vp})} ...>
        <DeckGL {...this.state.vp} {...this.state.size} layers={this.props.layers}/>
      </MapGL>
    );
  }
}

class Page extends React.Component {
  ...
  render() {
    const layer = new ScatterplotLayer({ id: 'xyz', ... });
    return <Map layers={[layer]}/>;
  }
}

However, this arrangement hits the "deck.gl sanity check - Matching layer is same" assertion every time the Map component is re-rendered without the parent component being re-rendered, as is the case when you pan or zoom the map. This is not exactly expected behavior, although the docs do hint at it.

Instead of requiring new layer instances, I believe a better approach would be to either clone the layer when this condition is detected, or change the underlying code to not rely on old/new layers being separate instances.