frontend/src/components/maps/LocationMapBottomSheet.jsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
   DEFAULT_MAP_FILTERS,
   getMapObjectDisplayLabel,
@@ -17,6 +18,7 @@ const DISPLAY_CONTROLS = [
   ["showCompleted", "Bought"],
   ["showUnmapped", "Unmapped"],
 ];
+const EMPTY_ITEMS = [];
 
 export default function LocationMapBottomSheet({
   mode,
@@ -28,9 +30,9 @@ export default function LocationMapBottomSheet({
   setLayersOpen,
   selectedObject,
   mapObjects = [],
-  selectedZoneItems,
+  selectedZoneItems = EMPTY_ITEMS,
   visibleAssignedItemCount = 0,
-  visibleUnmappedItems,
+  visibleUnmappedItems = EMPTY_ITEMS,
   unmappedItemCount,
   hiddenAreaCount,
   saving,
@@ -48,9 +50,25 @@ export default function LocationMapBottomSheet({
   onShowHiddenAreas,
 }) {
   const selectedTitle = getMapObjectDisplayLabel(selectedObject);
-  const selectedAssignedItems = selectedObject?.zone_id
+  const selectedZoneId = objectZoneId(selectedObject);
-    ? (mapState?.items || []).filter((item) => String(item.zone_id || "") === objectZoneId(selectedObject))
+  const mapItems = mapState?.items || EMPTY_ITEMS;
-    : [];
+  const { assignedItemCount, selectedAssignedItems } = useMemo(() => {
+    const nextSelectedAssignedItems = [];
+    let nextAssignedItemCount = 0;
+
+    mapItems.forEach((item) => {
+      if (!item.zone_id) return;
+      nextAssignedItemCount += 1;
+      if (selectedZoneId && String(item.zone_id) === selectedZoneId) {
+        nextSelectedAssignedItems.push(item);
+      }
+    });
+
+    return {
+      assignedItemCount: nextAssignedItemCount,
+      selectedAssignedItems: nextSelectedAssignedItems,
+    };
+  }, [mapItems, selectedZoneId]);
   const hiddenSelectedItemCount = Math.max(0, selectedAssignedItems.length - selectedZoneItems.length);
   const hasHiddenSelectedItems = hiddenSelectedItemCount > 0;
   const selectedItemCountLabel = hasHiddenSelectedItems
@@ -68,16 +86,24 @@ export default function LocationMapBottomSheet({
   const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject);
   const showEditorControls = mode === "edit" && canManage;
   const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject);
-  const changedLayerCount = DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length;
+  const changedLayerCount = useMemo(
-  const assignedItemCount = (mapState?.items || []).filter((item) => item.zone_id).length;
+    () => DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length,
+    [filters]
+  );
   const totalAreaCount = mapObjects.length;
   const visibleAreaCount = filters.showZones
     ? Math.max(0, totalAreaCount - hiddenAreaCount)
     : 0;
   const showMapOverview = mode !== "edit" && !selectedObject;
-  const unlinkedAreaCount = mapObjects.filter((object) => !objectZoneId(object)).length;
+  const unlinkedAreaCount = useMemo(
+    () => mapObjects.filter((object) => !objectZoneId(object)).length,
+    [mapObjects]
+  );
   const showDraftOverview = mode === "edit" && editorTool === "edit" && !selectedObject;
-  const unmappedItemPreview = visibleUnmappedItems.slice(0, 8);
+  const unmappedItemPreview = useMemo(
+    () => visibleUnmappedItems.slice(0, 8),
+    [visibleUnmappedItems]
+  );
   const overflowUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
   const hiddenUnmappedItemCount = Math.max(0, unmappedItemCount - visibleUnmappedItems.length);
   const hasHiddenUnmappedItems =