fix: unnecessary tile re-renders when viewerProperty changes (#135)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: airslice

src/engines/Cesium/core/Imagery.test.ts

@@ -1,10 +1,44 @@
 import { renderHook } from "@testing-library/react";
 import { UrlTemplateImageryProvider } from "cesium";
-import { expect, test, vi } from "vitest";
+import { expect, test, vi, beforeEach } from "vitest";
 
 import type { CustomProviderConfig } from "../../../Map/types/customProvider";
 
-import { type Tile, useImageryProviders } from "./Imagery";
+import ImageryLayers, { type Tile, useImageryProviders } from "./Imagery";
+
+// Mock Cesium scene and imageryLayerCollection for ImageryLayers component tests
+const mockAdd = vi.fn();
+const mockRemove = vi.fn();
+const mockContains = vi.fn(() => true);
+const mockIndexOf = vi.fn(() => 0);
+const mockRequestRender = vi.fn();
+
+const mockImageryLayerCollection = {
+  add: mockAdd,
+  remove: mockRemove,
+  contains: mockContains,
+  indexOf: mockIndexOf,
+};
+
+const mockScene = {
+  requestRender: mockRequestRender,
+  isDestroyed: () => false,
+};
+
+vi.mock("resium", () => ({
+  useCesium: () => ({
+    imageryLayerCollection: mockImageryLayerCollection,
+    scene: mockScene,
+  }),
+}));
+
+beforeEach(() => {
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+  mockContains.mockClear();
+  mockIndexOf.mockClear();
+  mockRequestRender.mockClear();
+});
 
 test("useImageryProviders", () => {
   const provider = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge: url }));
@@ -153,3 +187,58 @@ test("useImageryProviders", () => {
   typedRerender({ tiles: [] });
   expect(result.current.providers).toEqual({});
 });
+
+test("ImageryLayers should not re-render when tiles array reference changes but content is the same", async () => {
+  const tiles: Tile[] = [{ id: "1", type: "open_street_map", opacity: 0.8 }];
+
+  const { rerender } = renderHook(
+    ({ tiles }: { tiles: Tile[] }) => {
+      return ImageryLayers({
+        tiles,
+        cesiumIonAccessToken: undefined,
+        customProvider: undefined,
+        onTilesChange: undefined,
+      });
+    },
+    {
+      initialProps: { tiles },
+    },
+  );
+
+  // Wait for initial render to complete
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Clear mock calls from initial render
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+
+  // Re-render with a NEW tiles array reference but SAME content
+  const newTilesArraySameContent: Tile[] = [{ id: "1", type: "open_street_map", opacity: 0.8 }];
+
+  rerender({ tiles: newTilesArraySameContent });
+
+  // Wait for any effects to run
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Effect should NOT have run again - no layers should be removed or added
+  expect(mockRemove).not.toHaveBeenCalled();
+  expect(mockAdd).not.toHaveBeenCalled();
+
+  // Clear mocks
+  mockAdd.mockClear();
+  mockRemove.mockClear();
+
+  // Re-render with DIFFERENT content (changed opacity)
+  const differentTiles: Tile[] = [
+    { id: "1", type: "open_street_map", opacity: 0.5 }, // opacity changed
+  ];
+
+  rerender({ tiles: differentTiles });
+
+  // Wait for effects to run
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  // Effect SHOULD run - old layers removed and new ones added
+  expect(mockRemove).toHaveBeenCalled();
+  expect(mockAdd).toHaveBeenCalled();
+});

src/engines/Cesium/core/Imagery.tsx

@@ -53,8 +53,23 @@ export default function ImageryLayers({
 }: Props) {
   const { imageryLayerCollection, scene } = useCesium();
 
+  // Create a stable tiles reference that only changes when the content actually changes
+  // Normalize `undefined` to a stable empty array so `useImageryProviders` doesn't allocate a new default `[]` each render.
+  const emptyTiles = useMemo<Tile[]>(() => [], []);
+  const tilesValue = tiles ?? emptyTiles;
+
+  const prevTilesRef = useRef<Tile[]>(tilesValue);
+  const stableTiles = useMemo(() => {
+    if (!isEqual(prevTilesRef.current, tilesValue)) {
+      prevTilesRef.current = tilesValue;
+    }
+    return prevTilesRef.current;
+  }, [tilesValue]);
+
+  // Pass stableTiles to useImageryProviders to prevent providers from being recreated
+  // when tiles reference changes but content is the same
   const { providers } = useImageryProviders({
-    tiles,
+    tiles: stableTiles,
     cesiumIonAccessToken,
     customProvider,
     presets: tilePresets,
@@ -66,7 +81,9 @@ export default function ImageryLayers({
     let cancelled = false;
     const addedLayers: CesiumImageryLayer[] = [];
     // Track layers by their intended index to maintain order with async loading
-    const layersByIndex: (CesiumImageryLayer | null)[] = new Array(tiles?.length || 0).fill(null);
+    const layersByIndex: (CesiumImageryLayer | null)[] = new Array(stableTiles?.length || 0).fill(
+      null,
+    );
 
     const reorderLayers = () => {
       if (cancelled || scene.isDestroyed()) return;
@@ -91,7 +108,7 @@ export default function ImageryLayers({
       scene.requestRender();
     };
 
-    tiles?.forEach(({ id, zoomLevel, opacity, heatmap }, i) => {
+    stableTiles?.forEach(({ id, zoomLevel, opacity, heatmap }, i) => {
       const providerOrPromise = providers[id]?.[3];
       if (!providerOrPromise) return;
 
@@ -117,7 +134,9 @@ export default function ImageryLayers({
       };
 
       if (providerOrPromise instanceof Promise) {
-        providerOrPromise.then(doAdd).catch(err => console.error("Failed to load imagery provider:", err));
+        providerOrPromise
+          .then(doAdd)
+          .catch(err => console.error("Failed to load imagery provider:", err));
       } else {
         doAdd(providerOrPromise);
       }
@@ -134,7 +153,9 @@ export default function ImageryLayers({
         }
       }
     };
-  }, [providers, tiles, imageryLayerCollection, scene, onTilesChange]);
+    // Note: Using `stableTiles` to prevent re-renders when tiles reference changes but content is identical.
+    // This also stabilizes `providers` since it depends on tiles in useImageryProviders.
+  }, [providers, stableTiles, imageryLayerCollection, scene, onTilesChange]);
 
   return null;
 }