Using useRef instead of useState in <Handler/> (no need to re-render when mouse state is updated).

src/components/map/Handlers.tsx

@@ -1,4 +1,4 @@
-import react, { useState } from 'react';
+import react, { useRef, useState } from 'react';
 import { Point } from './types';
 import './Handler.css';
 import { handlersConfig } from './config';
@@ -46,50 +46,51 @@ export const Handlers: react.FC<HandlersProperties> = (
     timestamp: 0,
   };
 
-  const [mouseState, setMouseState] = useState(initialMouseState);
+  const mouseState = useRef(initialMouseState);
 
   const mouseLeaveHandler = (event: any) => {
     genericHandler(event);
-    setMouseState(initialMouseState);
+    mouseState.current = initialMouseState;
   };
 
   const mouseDownHandler = (event: any) => {
     genericHandler(event);
-    setMouseState({
+    mouseState.current = {
       down: true,
       starting: { x: event.clientX, y: event.clientY },
       timestamp: 0,
-    });
+    };
   };
 
   const mouseUpHandler = (event: any) => {
     genericHandler(event);
-    setMouseState(initialMouseState);
+    mouseState.current = initialMouseState;
   };
 
   const mouseMoveHandler = (event: any) => {
     if (
-      mouseState.down &&
-      Date.now() - mouseState.timestamp > handlersConfig.mouseMoveThrottleDelay
+      mouseState.current.down &&
+      Date.now() - mouseState.current.timestamp >
+        handlersConfig.mouseMoveThrottleDelay
     ) {
       genericHandler(event);
-      if (mouseState.down) {
+      if (mouseState.current.down) {
         props.transformMap(
           {
-            x: event.clientX - mouseState.starting.x,
-            y: event.clientY - mouseState.starting.y,
+            x: event.clientX - mouseState.current.starting.x,
+            y: event.clientY - mouseState.current.starting.y,
           },
           null,
           null
         );
-        setMouseState({
+        mouseState.current = {
           down: true,
           starting: {
             x: event.clientX,
             y: event.clientY,
           },
           timestamp: Date.now(),
-        });
+        };
       }
     }
   };