Merge pull request #5280 from HSLdevcom/fix-memory-errors

Fix memory warnings on console

app/component/map/ItineraryLine.js

@@ -159,6 +159,7 @@ class ItineraryLine extends React.Component {
           if (entranceCoordinates && !this.props.passive) {
             objs.push(
               <EntranceMarker
+                key={`entrance_${entranceCoordinates[0]}_${entranceCoordinates[1]}`}
                 position={{
                   lat: entranceCoordinates[0],
                   lon: entranceCoordinates[1],

app/component/map/Map.js

@@ -128,9 +128,13 @@ export default class Map extends React.Component {
         paddingBottomRight: [0, (window.innerHeight - 64) / 2],
       };
     }
+    this.mounted = false;
   }
 
   updateZoom = () => {
+    if (!this.mounted) {
+      return;
+    }
     // eslint-disable-next-line no-underscore-dangle
     const zoom = this.map?.leafletElement?._zoom || this.props.zoom || 16;
     if (zoom !== this.state.zoom) {
@@ -139,6 +143,7 @@ export default class Map extends React.Component {
   };
 
   componentDidMount() {
+    this.mounted = true;
     if (this.props.mapLayers.vehicles) {
       startClient(this.context);
     }
@@ -173,6 +178,7 @@ export default class Map extends React.Component {
   }
 
   componentWillUnmount() {
+    this.mounted = false;
     const { client } = this.context.getStore('RealTimeInformationStore');
     if (client) {
       this.context.executeAction(stopRealTimeClient, client);

app/component/map/MapWithTracking.js

@@ -118,9 +118,12 @@ class MapWithTrackingStateHandler extends React.Component {
       settingsOpen: false,
     };
     this.naviProps = {};
+    this.mounted = false;
   }
 
   async componentDidMount() {
+    this.mounted = true;
+
     if (!isBrowser) {
       return;
     }
@@ -129,18 +132,23 @@ class MapWithTrackingStateHandler extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
   // eslint-disable-next-line camelcase
   UNSAFE_componentWillReceiveProps(newProps) {
     if (
       newProps.mapTracking !== undefined &&
-      newProps.mapTracking !== this.state.mapTracking
+      newProps.mapTracking !== this.state.mapTracking &&
+      this.mounted
     ) {
       this.setState({ mapTracking: newProps.mapTracking });
     }
   }
 
   setMapElementRef = element => {
-    if (element && this.mapElement !== element) {
+    if (element && this.mapElement !== element && this.mounted) {
       this.mapElement = element;
       if (this.props.mapRef) {
         this.props.mapRef(element);
@@ -171,6 +179,10 @@ class MapWithTrackingStateHandler extends React.Component {
   };
 
   disableMapTracking = () => {
+    if (!this.mounted) {
+      return;
+    }
+
     this.setState({
       mapTracking: false,
     });
@@ -233,6 +245,10 @@ class MapWithTrackingStateHandler extends React.Component {
 
   // eslint-disable-next-line react/no-unused-class-component-methods
   setBottomPadding = padding => {
+    if (!this.mounted) {
+      return;
+    }
+
     this.map?.setBottomPadding(padding);
     this.setState({ bottomPadding: padding });
   };

app/component/map/tile-layer/TileLayerContainer.js

@@ -461,7 +461,6 @@ class TileLayerContainer extends GridLayer {
         );
       }
     }
-
     return showPopup ? popup : null;
   }
 }