Markers which are meant to move on google map creates two pairs. One that moves and one that is stuck on initial position

Question

I've been trying to implement a web-application in React that shows all airbourne aircrafts on a map. For this I've used React-Google-Maps together with the Opensky Network API.

My problem is very weird. When the application first loads and all markers are positioned, it looks fine. But when the markers start moving, the initial marker (the marker that is supposed to move) is still there while a new copy of the marker is moving from the initial position instead. Hence (after the movements of the markers) I have 2 sets of markers for every airplane on my map. One for the initial load (that is not moving), and one live that is moving.

I've coded my Map-component to fetch the data from the API every second and update the state after the fetch is done.

Any idea of why the first-loaded marker does not get removed when the state get's updated?

import React, { useState, useEffect } from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from 'react-google-maps';
//import * as aircrafts from '../../data/aircrafts.json'; 

function Map() {
  const [selectedAirplane, setSelectedAirplane] = useState(null);
  // Set state (locations of airplanes) to initial request as markers
  const [airplanes, setAirplanes] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      // Update state (markers) every second
      fetch('https://opensky-network.org/api/states/all', { method: "GET" })
      .then(res => res.json())
      .then(response => {
        setAirplanes(response["states"]);
        //console.log(response["states"])
      });

    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
    <GoogleMap 
        defaultZoom={10}
        defaultCenter={{ lat:  57.041401, lng: 12.401050 }}
    >
    { airplanes.map((airplane) => ( 
       <Marker 
          key={airplane[0]}
          position={{ 
            lat: airplane[6],
            lng: airplane[5] 
          }}
          onClick={() => {
            setSelectedAirplane(airplane);
          }}
       />
    ))}

    {selectedAirplane && (
      <InfoWindow
        position={{ 
          lat: selectedAirplane[6],
          lng: selectedAirplane[5] 
         }}
         onCloseClick={() => {
          setSelectedAirplane(null);
         }}
      >
        <div>Airplane Details</div>
      </InfoWindow>
    )}
    </GoogleMap>
    </div>
  );
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default WrappedMap;

Edit: This is what it looks like on initial load: Initial load

And this is what it looks like when the API has started to fetch data: Some seconds after initial load

And this is what it looks like when some minutes have passed: Minute or two after initial load

As you see, the initial marker that first loads is not disappearing. I don't really understand why. I have looked for resources to remove this but can't find any :/

The second marker is moving just fine as I want it to.

Any tip here is greatly appreciated, since I'm getting nowhere :( I've uploaded my project to Github and it's located here: https://github.com/emilwallgren/Flight-Tracker

Answer 1

Solved it: Had to remove React.StrictMode that surrounds App from index.js.

Now it works :)