Performance Issue with react-native-map-clustering

Question

Im loading some markers from the Overpass API (OpenStreetMap) and showing them in a ClusterMap. Although Markers are clustered now, the App has a bad performace and high interactivity latency. Is it possible to get better interactivity?

Expo: https://expo.dev/@ezcodeezlife/markercluster-test

Code:

import { ActivityIndicator, FlatList, Text, View, StyleSheet  } from 'react-native';
import { Marker } from 'react-native-maps'; 
import { ClusterMap, AnimatedRegion  } from 'react-native-cluster-map'; 

//This function was provided here: https://github.com/react-native-maps/react-native-maps/issues/356#issuecomment-515694070
export const getBoundByRegion = (region, scale = 1) => {
}

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [region, setRegion] = useState({
    latitude: 50.22364,
    longitude: 8.4491,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });
  

  const getBenches = async () => {
     try {
      const response = await fetch('https://overpass.openstreetmap.fr/api/interpreter?data=[out:json];(node[%27amenity%27=%27bench%27](50.22364307664712,8.449115594560567,50.24036141038248,8.46567765838438);node[%27leisure%27=%27picnic_table%27](50.22364307664712,8.449115594560567,50.24036141038248,8.46567765838438););out%20body;');
      const json = await response.json();
      setData(json);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  const getNewBenches = async (bounds) => {
    try {
     const response = await fetch("https://overpass.openstreetmap.fr/api/interpreter?data=[out:json];node[%27amenity%27=%27bench%27](" + bounds.minLat +"," + bounds.minLng + "," + bounds.maxLat + "," + bounds.maxLng + ");out%20body;");
     const json = await response.json();
     setData(json);
   } catch (error) {
     console.error(error);
   } finally {
   }
 }
  useEffect(() => {
    getBenches();
  }, []);

  if(isLoading == false) {
    return (
      <>
        <View>
          <ClusterMap 
            style={styles.container}
            region={ region }
            mapType={"satellite"}
            onRegionChangeComplete={(region) => {
              setRegion(region);
              getNewBenches(getBoundByRegion(region));
            } }
            //onMapReady={() => onMapReady()}
          >
            {data.elements.map((marker) => (
              <Marker
               tracksViewChanges={false}
               key={marker.id}
               coordinate={{ latitude: marker.lat, longitude:  marker.lon }}
              />
            ))}
        </ClusterMap >
        </View>
      </>
    )
  } else {
    return (
      <View>
        <ActivityIndicator />
      </View>
    )
  }
};

//styles

Is it possible to get better interactivity?

Answer 1

I had a similar issue and it was because I left many console logs in the code. after I removed them, my map interactivity was much much better. Try to remove as many unnecessary console logs as possible.