diff --git a/src/components/map/Tile.tsx b/src/components/map/Tile.tsx
index e708750..fb3f2fc 100644
--- a/src/components/map/Tile.tsx
+++ b/src/components/map/Tile.tsx
@@ -1,4 +1,5 @@
-import react, { useEffect, useRef } from 'react';
+import react, { memo, useEffect, useRef } from 'react';
+import { isEqual } from 'lodash';
export interface TileProperties {
/** The image's source URL */
@@ -13,20 +14,20 @@ export interface TileProperties {
* @returns A tile
*
* Tile components are containers for images.
- *
+ *
* They return an empty `` element immediately so that the rendering can proceed
* and append an `` element whenever the image is loaded.
- *
+ *
* They are designed to be part of {@link components/map/TiledLayer!TiledLayer} components in SVG `` elements
- * in which the unit is the tile size. In this coordinate system their size is thus always equal to 1.
+ * in which the unit is the tile size. In this coordinate system their size is thus always equal to 1.
*/
-export const Tile: react.FC = (props: TileProperties) => {
+export const Tile: react.FC = memo((props: TileProperties) => {
const g = useRef(null);
const timeout = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
-
+ console.log(`Rendering tile: ${props.href}`);
useEffect(() => {
const loadImage = async () => {
console.log(`Pre loading: ${props.href}`);
@@ -54,6 +55,6 @@ export const Tile: react.FC = (props: TileProperties) => {
}, [props.href]);
return ;
-};
+}, isEqual);
export default Tile;