Idem with <Tile/>

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;