Performance Issue with react-native-map-clustering - react-native

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.