diff --git a/src/components/map/TileSet.tsx b/src/components/map/TileSet.tsx
index e51eb0b..707b617 100644
--- a/src/components/map/TileSet.tsx
+++ b/src/components/map/TileSet.tsx
@@ -1,5 +1,5 @@
-import react, {  } from 'react';
-import { range } from 'lodash';
+import react, { memo } from 'react';
+import { isEqual, range } from 'lodash';
 
 import { Rectangle, TileKeyObject } from './types';
 import tileUri from './uris';
@@ -51,52 +51,53 @@ export interface TileSetProperties {
  *
  *
  */
-export const TileSet: react.FC<TileSetProperties> = (
-  props: TileSetProperties
-) => {
-  // console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
+export const TileSet: react.FC<TileSetProperties> = memo(
+  (props: TileSetProperties) => {
+    // console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
 
-  const key = tileUri({
-    provider: props.keyObject.provider,
-    zoomLevel: props.keyObject.zoomLevel,
-  });
+    const key = tileUri({
+      provider: props.keyObject.provider,
+      zoomLevel: props.keyObject.zoomLevel,
+    });
 
-  const tiles: any = globalThis.cacheForTileSet.get(key) ?? new Map();
-  if (props.viewPort !== undefined) {
-    range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).forEach(
-      (row) => {
-        range(
-          props.viewPort!.topLeft.x,
-          props.viewPort!.bottomRight.x + 1
-        ).forEach((col) => {
-          const keyObject = {
-            provider: props.keyObject.provider,
-            zoomLevel: props.keyObject.zoomLevel,
-            x: props.keyObject.x + col,
-            y: props.keyObject.y + row,
-          };
-          const key = tileUri(keyObject);
-          if (!tiles.has(key)) {
-            tiles.set(
-              key,
-              <Tile
-                key={key}
-                keyObject={{
-                  provider: props.keyObject.provider,
-                  zoomLevel: props.keyObject.zoomLevel,
-                  x: col,
-                  y: row,
-                }}
-              />
-            );
-          }
-        });
-      }
-    );
-    globalThis.cacheForTileSet.set(key, tiles);
-  }
+    const tiles: any = globalThis.cacheForTileSet.get(key) ?? new Map();
+    if (props.viewPort !== undefined) {
+      range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).forEach(
+        (row) => {
+          range(
+            props.viewPort!.topLeft.x,
+            props.viewPort!.bottomRight.x + 1
+          ).forEach((col) => {
+            const keyObject = {
+              provider: props.keyObject.provider,
+              zoomLevel: props.keyObject.zoomLevel,
+              x: props.keyObject.x + col,
+              y: props.keyObject.y + row,
+            };
+            const key = tileUri(keyObject);
+            if (!tiles.has(key)) {
+              tiles.set(
+                key,
+                <Tile
+                  key={key}
+                  keyObject={{
+                    provider: props.keyObject.provider,
+                    zoomLevel: props.keyObject.zoomLevel,
+                    x: col,
+                    y: row,
+                  }}
+                />
+              );
+            }
+          });
+        }
+      );
+      globalThis.cacheForTileSet.set(key, tiles);
+    }
 
-  return <>{Array.from(tiles.values())}</>;
-};
+    return <>{Array.from(tiles.values())}</>;
+  },
+  isEqual
+);
 
 export default TileSet;