Simple implementation of event handler throttling.

src/components/map/Handlers.tsx

@@ -1,8 +1,7 @@
 import react, { useState } from 'react';
-import { throttle } from 'lodash';
 import { Point } from './types';
-import { handlersConfig } from './config';
 import './Handler.css';
+import { handlersConfig } from './config';
 
 export interface HandlersProperties {
   /**Transform the map:
@@ -44,7 +43,11 @@ export const Handlers: react.FC<HandlersProperties> = (
   const initialMouseState = {
     down: false,
     starting: { x: -1, y: -1 },
+    timestamp: 0,
   };
+
+  const [mouseState, setMouseState] = useState(initialMouseState);
+
   const mouseLeaveHandler = (event: any) => {
     genericHandler(event);
     setMouseState(initialMouseState);
@@ -55,6 +58,7 @@ export const Handlers: react.FC<HandlersProperties> = (
     setMouseState({
       down: true,
       starting: { x: event.clientX, y: event.clientY },
+      timestamp: 0,
     });
   };
 
@@ -63,28 +67,33 @@ export const Handlers: react.FC<HandlersProperties> = (
     setMouseState(initialMouseState);
   };
 
-  const mouseMoveHandler = throttle((event: any) => {
-    genericHandler(event);
-    if (mouseState.down) {
-      props.transformMap(
-        {
-          x: event.clientX - mouseState.starting.x,
-          y: event.clientY - mouseState.starting.y,
-        },
-        null,
-        null
-      );
-      setMouseState({
-        down: true,
-        starting: {
-          x: event.clientX,
-          y: event.clientY,
-        },
-      });
+  const mouseMoveHandler = (event: any) => {
+    if (
+      mouseState.down &&
+      Date.now() - mouseState.timestamp > handlersConfig.mouseMoveThrottleDelay
+    ) {
+      genericHandler(event);
+      if (mouseState.down) {
+        props.transformMap(
+          {
+            x: event.clientX - mouseState.starting.x,
+            y: event.clientY - mouseState.starting.y,
+          },
+          null,
+          null
+        );
+        setMouseState({
+          down: true,
+          starting: {
+            x: event.clientX,
+            y: event.clientY,
+          },
+          timestamp: Date.now(),
+        });
+      }
     }
-  }, handlersConfig.mouseMoveThrottleDelay);
+  };
 
-  const [mouseState, setMouseState] = useState(initialMouseState);
   return (
     <div
       className='handler'

src/components/map/TiledLayer.tsx

@@ -1,4 +1,4 @@
-import react, { useEffect, useRef } from 'react';
+import react, { useRef } from 'react';
 import { range, isEqual } from 'lodash';
 
 import { Rectangle, TileFactory, TileKeyObject } from './types';

src/components/map/config.ts

@@ -1,5 +1,5 @@
 /**The handlers configuration */
 export const handlersConfig = {
     /**Controls the activity of the mouse mouse event */
-    mouseMoveThrottleDelay: 1000,
+    mouseMoveThrottleDelay: 50,
 }