diff --git a/lib/ClusteredMapView.js b/lib/ClusteredMapView.js index 8c7820c0..b3976621 100644 --- a/lib/ClusteredMapView.js +++ b/lib/ClusteredMapView.js @@ -51,7 +51,6 @@ const ClusteredMapView = forwardRef( ) => { const [markers, updateMarkers] = useState([]); const [spiderMarkers, updateSpiderMarker] = useState([]); - const [otherChildren, updateChildren] = useState([]); const [superCluster, setSuperCluster] = useState(null); const [currentRegion, updateRegion] = useState( restProps.region || restProps.initialRegion @@ -66,14 +65,21 @@ const ClusteredMapView = forwardRef( [children] ); + // Derive synchronously — storing non-markers (polylines, overlays) in state + useEffect + // leaves stale native views when those children are removed (e.g. toggling map layers). + const nonMarkerChildren = useMemo(() => { + if (!clusteringEnabled) { + return propsChildren; + } + return propsChildren.filter((child) => !isMarker(child)); + }, [propsChildren, clusteringEnabled]); + useEffect(() => { const rawData = []; - const otherChildren = []; if (!clusteringEnabled) { updateSpiderMarker([]); updateMarkers([]); - updateChildren(propsChildren); setSuperCluster(null); return; } @@ -81,8 +87,6 @@ const ClusteredMapView = forwardRef( propsChildren.forEach((child, index) => { if (isMarker(child)) { rawData.push(markerToGeoJSONFeature(child, index)); - } else { - otherChildren.push(child); } }); @@ -102,7 +106,6 @@ const ClusteredMapView = forwardRef( const markers = superCluster.getClusters(bBox, zoom); updateMarkers(markers); - updateChildren(otherChildren); setSuperCluster(superCluster); superClusterRef.current = superCluster; @@ -212,7 +215,7 @@ const ClusteredMapView = forwardRef( ) ) : null )} - {otherChildren} + {nonMarkerChildren} {spiderMarkers.map((marker) => { return propsChildren[marker.index] ? React.cloneElement(propsChildren[marker.index], {