Working around the fact that react's strict mode initializes compenents twice...

src/components/live-map.tsx

@@ -1,12 +1,11 @@
-import react, { useEffect } from 'react';
+import react, { useState } from 'react';
-import { useState } from 'react';
 import { Map, Marker, ZoomControl } from 'pigeon-maps';
-import GPXOverlay from './gpx-overlay';
 import { registerPlugin } from '@capacitor/core';
 import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
 import { useDispatch } from 'react-redux';
 
 import { gpxActions } from '../store/gpx';
+import GPXOverlay from './gpx-overlay';
 
 const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
   'BackgroundGeolocation'
@@ -15,13 +14,19 @@ const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
 const LiveMap: react.FC = () => {
   const initialCenter: [number, number] = [43.57154, 3.94351];
   const initialZoom: number = 15;
+  const [initialized, setInitialized] = useState(false);
   const [center, setCenter] = useState(initialCenter);
   const [position, setPosition] = useState(initialCenter);
   const [zoom, setZoom] = useState(initialZoom);
 
   const dispatch = useDispatch();
 
-  useEffect(() => {
+  if (!initialized) {
+    dispatch(
+      gpxActions.clearGPX({
+        trkKey: 'current',
+      })
+    );
     dispatch(
       gpxActions.appendTrkpt({
         trkKey: 'current',
@@ -135,7 +140,8 @@ const LiveMap: react.FC = () => {
       .catch((reason) => {
         console.error('com.dyomedea.dyomedea  LOG', ' - reason: ', reason);
       });
-  }, [dispatch]);
+    setInitialized(true);
+  }
 
   return (
     <Map

src/store/gpx.ts

@@ -20,6 +20,9 @@ const slice = createSlice({
         action.payload.trkpt
       );
     },
+    clearGPX(state, action) {
+      state[action.payload.trkKey] = initialState.current;
+    },
   },
 });