After creating feature when new data comes i replace layer source but on map still deleted features visible(ArcGIS-js-api 4)

I created a feature layer and after every 5 seconds new data will fetched by external service in JSON format. When new data come i overwrite feature layer source with new data and call layer.refresh method. What i observe still old data not removed from map and if popup is opened then content is not updated. I don't want to use apply edits.by creati

Issues: When I replace/overwrite layer source then on map still some old deleted features is there and in popup updated data not reflected

Question: After overwrite feature layer source how to update map and popup content

Solution

The next code shows that the source property is an option to initialize a local FeatureLayer. In order to manipulate the features you need to use applyEdits.

Take a look the source length while features are added and deleted. [Spoiler, it never change]

I think the problem you are experimenting is related to what I mention.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer',
      'esri/Graphic'
    ], function (Map, MapView, FeatureLayer, Graphic) {

      const quakesUrl =
        'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0';
      
      const quakesLayer = new FeatureLayer({
        url: quakesUrl,
        visible: false
      });

      let lastAddFeatureResults = [];

      const resultsLayer = new FeatureLayer({
        source: [],
        geometryType: 'point',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'simple-marker',
            style: 'circle',
            size: `8px`,
            color: [255, 0, 0, .6],
            outline: {
              color: 'black',
              width: '0.5px'
            }
          }
        },
        fields: [
          {
            name: 'OBJECTID',
            alias: 'ObjectID',
            type: 'oid'
          },
          {
            name: 'time',
            alias: 'Time',
            type: 'string'
          },
          {
            name: 'mag',
            alias: 'Magnitude',
            type: 'double'
          },
          {
            name: 'magType',
            alias: 'Magnitude Type',
            type: 'string'
          },
          {
            name: 'place',
            alias: 'Place',
            type: 'string'
          },
          {
            name: 'type',
            alias: 'Type',
            type: 'string'
          }
        ],
        popupEnable: true,
        popupTemplate: {
          title: '{place}'
        }
      });

      const map = new Map({
        basemap: "gray",
        layers: [quakesLayer, resultsLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-97.75188, 37.23308],
        zoom: 9
      });

      function queryEarthquakes(mag) {
        const query = quakesLayer.createQuery();
        query.where = `mag = ${mag}`;
        
        return quakesLayer.queryFeatures(query);
      }

      function displayResults(results) {
        const addFeatures = results.features;
        resultsLayer.applyEdits({
          addFeatures,
          deleteFeatures: updates % 2 === 0 ? lastAddFeatureResults : []
        }).then(results => {
          // console.log(results.addFeatureResults);
          // console.log(results.deleteFeatureResults);
          lastAddFeatureResults = updates % 2 === 0 ?
            results.addFeatureResults :
            lastAddFeatureResults.concat(results.addFeatureResults);
          console.log(`[after update ${updates}] features:${lastAddFeatureResults.length}  source.length:${resultsLayer.source.length} added:${results.addFeatureResults.length} deleted:${results.deleteFeatureResults.length}`)
        });
      }

      function updateLayer() {
        updates++;
        console.log(`[before update ${updates}] features:${lastAddFeatureResults.length} source.length:${resultsLayer.source.length}`)
        console.timeLog('update layer');
        queryEarthquakes(updates % 2 ? 3 : 4).then(displayResults);
      }
      
      console.time('update layer');

      let updates = 0;
      updateLayer();

      setInterval(updateLayer, 5000);

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>