Clusters do not reform after programmatic camera zoom via setCamera

[COSSART-FR]

Description

When clicking on a cluster to expand it (via setCamera with zoomLevel and centerCoordinate), and then zooming out, the clusters do not reform properly. The issue appears to be related to the timing of region updates when programmatically changing the camera.

Expected Behavior

After clicking a cluster to expand it and then zooming out, clusters should reform automatically based on the current zoom level and visible region.

Actual Behavior

After clicking a cluster to expand it, when zooming out, clusters do not reform. However, if the address is set manually via a menu (which also updates the camera), the clusters work correctly.

Steps to Reproduce

1. Display a map with clustered markers using @rnmapbox/maps
2. Click on a cluster to expand it (using setCamera with zoomLevel and centerCoordinate)
3. Zoom out using pinch gesture or programmatic zoom
4. Observe that clusters do not reform

Environment

• Package: @rnmapbox/maps version ^10.2.9
• React Native: 0.77.3
• Platform: iOS and Android
• Map Style: Custom Mapbox style

My code

We're using react-native-clusterer with @rnmapbox/maps to cluster markers. The clustering hook depends on the region state which is updated asynchronously via onDragEnd:

// Hook that uses clustering
const useMap = (slots, mapDimensions, region) => {
  const clusterCollection = useMemo(() => {
    // Convert slots to GeoJSON features
    return MapUtils.getCollectionFromSlots(slotsWithPosition);
  }, [slots]);

  // useClusterer depends on region to recalculate clusters
  const [points, superCluster] = useClusterer(
    clusterCollection.features || [],
    mapDimensions,
    region, // <-- This region is not updated immediately after setCamera
    {
      radius: 7,
      maxZoom: 22,
      minPoints: 2,
    },
  );

  return { points, superCluster };
};

// Component that handles cluster clicks
function ClusterMapPin({ point, setCamera, onZoomChange }) {
  const handleClusterPress = () => {
    InteractionManager.runAfterInteractions(() => {
      const region = point.properties.getExpansionRegion();
      const zoom = MapUtils.regionToZoom(region, mapWidth, mapHeight);
      const limitedZoom = Math.min(zoom, 14);

      // Update zoom state immediately
      if (onZoomChange) {
        onZoomChange(limitedZoom);
      }

      // Update camera programmatically
      if (setCamera) {
        requestAnimationFrame(() => {
          setCamera({
            zoomLevel: limitedZoom,
            centerCoordinate: [region.longitude, region.latitude],
            animationMode: 'flyTo',
          });
        });
      }
    });
  };
}

// Main screen component
function SearchScreen() {
  const [zoomLevel, setZoomLevel] = useState(initialZoom);
  const [region, setRegion] = useState(initialRegion);

  // Region is updated asynchronously via onDragEnd (debounced)
  const handleDragEnd = useCallback((state) => {
    requestAnimationFrame(() => {
      setRegion(
        MapUtils.boundsToRegion([
          [state.properties.bounds.ne[0], state.properties.bounds.ne[1]],
          [state.properties.bounds.sw[0], state.properties.bounds.sw[1]],
        ]),
      );
    });
  }, []);

  const handleZoomChange = useCallback((newZoom) => {
    if (newZoom != null && Math.abs(newZoom - zoomLevel) > 0.01) {
      setZoomLevel(newZoom);
      // Region is NOT updated here - it will be updated later by handleDragEnd
      // This causes useClusterer to use stale region data
    }
  }, [zoomLevel]);

  // useMap depends on region, but region is not updated immediately after setCamera
  const { points, superCluster } = useMap(availableSlotsData, mapDimensions, region);

  return (
    <MapView onDragEnd={handleDragEnd}>
      <Camera ref={cameraRef} />
      {/* Render clustered points */}
    </MapView>
  );
}

// Region is updated asynchronously via onDragEnd callback
// This causes a timing issue where clusters don't reform on zoom out