From a7d053885ec38f0550415cb88bb277b60139b89d Mon Sep 17 00:00:00 2001
From: mulengawilfred <m.wilfred@eukarya.io>
Date: Thu, 5 Dec 2024 04:07:20 +0200
Subject: [PATCH] fix: add use memo to function returning zoomLevels

---
 src/engines/Cesium/core/Imagery.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/engines/Cesium/core/Imagery.tsx b/src/engines/Cesium/core/Imagery.tsx
index 1f028aa..fa4ff2d 100644
--- a/src/engines/Cesium/core/Imagery.tsx
+++ b/src/engines/Cesium/core/Imagery.tsx
@@ -113,12 +113,12 @@ export function useImageryProviders({
   const tileKeys = tiles.map(t => t.id).join(",");
   const prevTileKeys = useRef(tileKeys);
   const prevProviders = useRef<Providers>({});
-  
-  const zoomLevels = tiles.map(t => {
-    if(t.id && t.zoomLevel) return {[t.id]: t.zoomLevel}
+  const zoomLevels = useMemo(() => tiles.map(t => {
+      if (t.id && t.zoomLevel) return { [t.id]: t.zoomLevel };
     return
-  })
-  const prevZoomLevels = useRef(zoomLevels)
+  }),
+  [tiles]);
+  const prevZoomLevels = useRef(zoomLevels);
 
   // Manage TileProviders so that TileProvider does not need to be recreated each time tiles are updated.
   const { providers, updated } = useMemo(() => {