Changing the latitude or longitude of a marker: componentShouldUpdate() receives wrong values

[derwaldgeist]

I am clustering markers on a map, where the marker positions change over time. It's a reactive app where marker positions are influenced by underlying data changes; think of Uber car positions being tracked on a map.

If new data is received, I check - for every marker - if the latitude/longitude values have been changed and re-render them only if this is the case. For this, I am using componentShouldUpdate() to compare the previous and next props.

This works if I place the markers on the map directly, i.e. without clustering them. If the markers are placed as children of a Cluster, however, the componentShouldUpdate() method always receives the initial value of latitude and longitude. Any dynamic changes of these values won't be reflected in the marker positions. They stay where they were initially placed.

This only happens if the markers are passed in as an array, where each marker has its unique key that does not change over time (as you would expect it). Think of the number plates of each car. If I change the keys of the markers to random keys on each re-render, longitude and latitude are passed in correctly. But this of course causes many unnecessary re-renders.

It seems as if the Cluster caches the markers somehow and does not update their lat/lon values if these change, even if the markers are currently visible to the user (i.e. not clustered) on the current zoom level.

Is there a way to prevent this?