Comparing listener-based v non-listener approach of getting geojson

Map1.jsx

class Map extends Component {
  loadIncidents = () => {
    const { project, baseMapApi } = this.props;
    this.incidentEntrySource = new VectorSource({
      format: new GeoJSON(),
      url: `${baseMapApi}path/to/resource/${project.id}`
    });

    this.incidentEntryLayer = new VectorLayer({
      source: this.incidentEntrySource,
      style: getStyleForFeature
    });

    this.incidentEntrySource.on("change", this.handleIncidentSourceChange);

    this.incidentEntryLayer.setZIndex(9999);
    this.map.addLayer(this.incidentEntryLayer);
  };

  handleIncidentSourceChange = () => {
    if (this.incidentEntrySource.getState() === OL_STATE.READY) {
      /**
       * Put all the incidents into state.
       */
      const { rootOrganization } = this.props.project;
      this.setState(
        () => ({
          incidents: compose(
            keyByPrimaryKey,
            map(
              compose(
                mapRootOrgDefaultHidden(rootOrganization),
                mapFeatureData
              )
            )
          )(this.incidentEntrySource.getFeatures())
        }),
        () => {
          /**
           * Un-sub.
           */
          this.incidentEntrySource.un(
            "change",
            this.handleIncidentSourceChange
          );

          if (this.isUsingDefaultCoords(history)) {
            this.zoomToAllIncidents();
          }

          /**
           * These specific slices of the incidents need to be processed _after_ the incidents
           * were originally added.
           */
          const { incidents } = this.state;
          this.handleKmlFeatures(Object.values(incidents));
        }
      );
    }
  };
  // the rest
}

Map2.jsx

class Map extends Component {
  loadIncidents = () => {
    const { project } = this.props;

    getResourceAsGeoJson(project.id)
      .then(data => {
        const features = new GeoJSON({featureProjection: 'ESPG:3857'}).readFeatures(data);

        this.incidentEntrySource = new VectorSource({
          features,
        });

        this.incidentEntryLayer = new VectorLayer({
          source: this.incidentEntrySource,
          style: getStyleForFeature
        });

        this.incidentEntryLayer.setZIndex(9999);
        this.map.addLayer(this.incidentEntryLayer);

        this.handleIncidentSourceChange();
      })
  };

  handleIncidentSourceChange = () => {
      /**
       * Put all the incidents into state.
       */
      const { rootOrganization } = this.props.project;
      this.setState(
        () => ({
          incidents: compose(
            keyByPrimaryKey,
            map(
              compose(
                mapRootOrgDefaultHidden(rootOrganization),
                mapFeatureData
              )
            )
          )(this.incidentEntrySource.getFeatures())
        }),
        () => {
          if (this.isUsingDefaultCoords(history)) {
            this.zoomToAllIncidents();
          }

          /**
           * These specific slices of the incidents need to be processed _after_ the incidents
           * were originally added.
           */
          const { incidents } = this.state;
          this.handleKmlFeatures(Object.values(incidents));
        }
      );
  };
  // the rest
}