Avoid uncessessary rerendering (see https://medium.com/swlh/making-stupid-react-smart-in-re-rendering-5f04b5bab327 ).

src/components/map/Map.tsx

@@ -1,4 +1,4 @@
-import react, { useState } from 'react';
+import react, { useCallback, useState } from 'react';
 import Handlers from './Handlers';
 import Tile from './Tile';
 import TiledLayer from './TiledLayer';
@@ -16,10 +16,13 @@ export const Map: react.FC<MapProperties> = (props: MapProperties) => {
     shift: { x: 0, y: 0 },
   });
 
-  const simpleTileFactory: TileFactory = (keyObject) => (
+  const simpleTileFactory: TileFactory = useCallback(
+    (keyObject) => (
       <Tile
         href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
       />
+    ),
+    []
   );
 
   const transformMap = (

src/components/map/TiledLayer.tsx

@@ -1,4 +1,4 @@
-import react, { useRef } from 'react';
+import react, { memo, useRef } from 'react';
 import { range, isEqual } from 'lodash';
 
 import { Rectangle, TileFactory, TileKeyObject } from './types';
@@ -27,9 +27,8 @@ export interface TiledLayerProperties {
  * TODO: test tiles'X and Y boundaries.
  *
  */
-export const TiledLayer: react.FC<TiledLayerProperties> = (
-  props: TiledLayerProperties
-) => {
+export const TiledLayer: react.FC<TiledLayerProperties> = memo(
+  (props: TiledLayerProperties) => {
     console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
     const tiles = useRef<any>({});
     const previousKeyObject = useRef<TileKeyObject>(props.keyObject);
@@ -62,6 +61,8 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
     );
 
     return <>{Object.values(tiles.current)}</>;
-};
+  },
+  isEqual
+);
 
 export default TiledLayer;