Use shallow reactivity where possible to reduce memory overhead

src/stores/cluster.ts

@@ -1,17 +1,17 @@
 import { defineStore, storeToRefs } from 'pinia'
 import type { AnyProps } from 'supercluster'
 import Supercluster from 'supercluster'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 import { useFilters } from './filters'
 import type { BoundingBox, Cluster, Location, MemoizedCluster, Point } from '@/types'
 
 export const useCluster = defineStore('cluster', () => {
   const { selectedCategories, selectedCurrencies } = storeToRefs(useFilters())
 
-  const clusters = ref<Cluster[]>([])
+  const clusters = shallowRef<Cluster[]>([])
 
   // All items that are not clustered
-  const singles = ref<Location[]>([])
+  const singles = shallowRef<Location[]>([])
 
   const BASE_RADIUS = 140 // This is the max cluster radius at zoom level 0
   const DECAY_FACTOR = 1.05 // You can adjust this to change how fast the radius decreases
@@ -26,9 +26,9 @@ export const useCluster = defineStore('cluster', () => {
       - Before re-clustering, we check for existing data matching the current zoom, bounding box, and filters.
       - If a match is found, we reuse stored clusters; otherwise, new clusters are computed and stored.
   */
-  const memoizedCluster = ref<Map<number, MemoizedCluster[]>>(new Map())
+  const memoizedCluster = shallowRef<Map<number, MemoizedCluster[]>>(new Map())
 
-  const clusterAlgorithm = ref<Supercluster>()
+  const clusterAlgorithm = shallowRef<Supercluster>()
 
   function cluster(locations: Location[], { neLat, neLng, swLat, swLng }: BoundingBox, zoom: number) {
     const existingData = memoizedCluster.value.get(zoom)

src/stores/locations.ts

@@ -1,5 +1,5 @@
 import { defineStore, storeToRefs } from 'pinia'
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, ref, shallowReactive, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRouteQuery } from '@vueuse/router'
 import { useMap } from './map'
@@ -19,8 +19,8 @@ export const useLocations = defineStore('locations', () => {
       - Before fetching, we check if the current bounding box is within a larger fetched bounding box.
       - If so, the fetch is skipped; otherwise, a new fetch occurs and `memoizedLocations` is updated.
   */
-  const memoizedLocations = ref<BoundingBox[]>([])
-  const locationsMap = reactive(new Map<string, Location>())
+  const memoizedLocations: BoundingBox[] = []
+  const locationsMap = shallowReactive(new Map<string, Location>())
   const locations = computed(() => {
     if (!currentBoundingBox.value)
       return []
@@ -36,7 +36,7 @@ export const useLocations = defineStore('locations', () => {
     currentBoundingBox.value = boundingBox
 
     // Check if the current bounding box is within an already fetched bounding box
-    for (const { neLat, neLng, swLat, swLng } of memoizedLocations.value) {
+    for (const { neLat, neLng, swLat, swLng } of memoizedLocations) {
       if (boundingBox.neLat <= neLat && boundingBox.neLng <= neLng && boundingBox.swLat >= swLat && boundingBox.swLng >= swLng)
         return
     }
@@ -45,7 +45,7 @@ export const useLocations = defineStore('locations', () => {
     newLocations.forEach(newLocation => locationsMap.set(newLocation.uuid, newLocation))
 
     // Update memoizedLocations
-    memoizedLocations.value.push(boundingBox)
+    memoizedLocations.push(boundingBox)
     loaded.value = true
   }
 

src/stores/map.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { defineStore, storeToRefs } from 'pinia'
 import type { GoogleMap } from 'vue3-google-map'
 import { useDebounceFn } from '@vueuse/core'
@@ -8,7 +8,7 @@ import { useCluster } from './cluster'
 import type { EstimatedMapPosition, MapPosition, Point } from '@/types'
 
 export const useMap = defineStore('map', () => {
-  const mapInstance = ref<typeof GoogleMap>()
+  const mapInstance = shallowRef<typeof GoogleMap>()
   const map = computed(() => mapInstance.value?.map as google.maps.Map)
   const center = () => map.value?.getCenter()?.toJSON() as Point
   const zoom = () => map.value?.getZoom() as number