Preventing consecutive API calls on re-render.

[petertdinh]

So right now I have multiple tabs on a page and one of these tabs, Location, houses GoogleMapComponent:

import React, { PropTypes } from 'react';
import { withGoogleMap, GoogleMap, InfoWindow, Marker } from 'react-google-maps';
import withScriptjs from 'react-google-maps/lib/async/withScriptjs';

const GoogleMapComponent = withScriptjs(
  withGoogleMap(({
    infoContent,
    onMarkerClick,
    onMarkerClose,
    position,
    showInfo,
  }) => (
    <GoogleMap
      defaultZoom={14}
      defaultCenter={position}
    >
      <Marker
        position={position}
        onClick={onMarkerClick}
      >
      {showInfo && (
          <div>
          <InfoWindow onCloseClick={onMarkerClose}>
            <div>
              {infoContent}
            </div>
          </InfoWindow>
        </div>
      )}
      </Marker>
    </GoogleMap>
  ))
);

export default GoogleMapComponent;

The problem I'm running into is that GoogleMapComponent is making an API call every time I navigate back into it from another tab. Is there a way to cache the component the first time I navigate into the Location tab, and not have it do consecutive API calls when I go in and out of the tab?

[tomchentw]

What you can do:

• Help check the implementation of withScriptjs and see if there's a bug there.
• Submit a minimal reproducible repository to demo the problem

Thanks

[tomchentw]

Also refer to Getting Help section in the README (or #469).