react-leaflet-cluster
react-leaflet-cluster copied to clipboard
performance with unchanged marker array
I'm struggling to squeeze performance out of the marker cluster in a situation where it shouldn't even be rerendering.
<MarkerClusterGroup chunkedLoading={true}>
{filteredMarkers?.map((c) => (
<Marker key={c.index} position={[c.lat, c.lng]} title={c.skoolName}>
</Marker>
))}
</MarkerClusterGroup>
filteredMarkers is an array which gets modified by an external slider, so I can justify that there's some jerking when the array changes in length. But why am i witnessing slowdowns even when filteredMarkers stays exactly the same ? (agreeably, the object reference changes but the values tay exactly the same and the key prop should take care of this).
The array size is a few thousand elements.
Yet the browser is doing an unreasonable amount of calls to addLayer in MarketClousterGroup.js. (trace attached)
Trace-20240424T141121.zip