From 016f99daf654d0122d635cd0739b350607a8a798 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Tue, 18 Oct 2022 16:57:18 +0200
Subject: [PATCH] Idem with <Tile/>

---
 src/components/map/Tile.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

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 `<g/>` element immediately so that the rendering can proceed
  * and append an `<image/>` element whenever the image is loaded.
- * 
+ *
  * They are designed to be part of {@link components/map/TiledLayer!TiledLayer} components in SVG `<g/>` 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<TileProperties> = (props: TileProperties) => {
+export const Tile: react.FC<TileProperties> = memo((props: TileProperties) => {
   const g = useRef<SVGGElement>(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<TileProperties> = (props: TileProperties) => {
   }, [props.href]);
 
   return <g ref={g} />;
-};
+}, isEqual);
 
 export default Tile;