diff --git a/frontend/src/HudCanvas.tsx b/frontend/src/HudCanvas.tsx
index 2c60362..c68e549 100644
--- a/frontend/src/HudCanvas.tsx
+++ b/frontend/src/HudCanvas.tsx
@@ -174,102 +174,108 @@ export const HudCanvas: React.FC<Props> = ({
     return x;
   };
 
-  const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
-    if (mode != Mode.Normal) {
-      return;
-    }
-
-    const x = getCanvasX(evt);
-
-    if (isHoveringSelectionStart(x)) {
-      setMode(Mode.ResizingStart);
-      moveOffsetX.current = x;
-    } else if (isHoveringSelectionEnd(x)) {
-      setMode(Mode.ResizingEnd);
-      moveOffsetX.current = x;
-    } else if (isHoveringSelection(x)) {
-      setMode(Mode.Dragging);
-      setCursor('pointer');
-      moveOffsetX.current = x;
-    } else {
-      setMode(Mode.Selecting);
-      setCursor('col-resize');
-      moveOffsetX.current = x;
-      setNewSelection({ start: x, end: x });
-    }
-  };
-
-  const handleMouseMove = (evt: MouseEvent<HTMLCanvasElement>) => {
-    const x = getCanvasX(evt);
-
-    switch (mode) {
-      case Mode.Normal: {
-        if (isHoveringSelectionStart(x)) {
-          setHoverState(HoverState.OverSelectionStart);
-          setCursor('col-resize');
-        } else if (isHoveringSelectionEnd(x)) {
-          setHoverState(HoverState.OverSelectionEnd);
-          setCursor('col-resize');
-        } else if (isHoveringSelection(x)) {
-          setHoverState(HoverState.OverSelection);
-          setCursor('pointer');
-        } else {
-          setCursor('auto');
-        }
-        break;
+  const handleMouseDown = useCallback(
+    (evt: MouseEvent<HTMLCanvasElement>) => {
+      if (mode != Mode.Normal) {
+        return;
       }
-      case Mode.ResizingStart: {
-        const diff = x - moveOffsetX.current;
-        const start = constrainXToCanvas(selection.start + diff);
 
-        if (start > selection.end) {
-          setNewSelection({ start: selection.end, end: start });
+      const x = getCanvasX(evt);
+
+      if (isHoveringSelectionStart(x)) {
+        setMode(Mode.ResizingStart);
+        moveOffsetX.current = x;
+      } else if (isHoveringSelectionEnd(x)) {
+        setMode(Mode.ResizingEnd);
+        moveOffsetX.current = x;
+      } else if (isHoveringSelection(x)) {
+        setMode(Mode.Dragging);
+        setCursor('pointer');
+        moveOffsetX.current = x;
+      } else {
+        setMode(Mode.Selecting);
+        setCursor('col-resize');
+        moveOffsetX.current = x;
+        setNewSelection({ start: x, end: x });
+      }
+    },
+    [mode, selection]
+  );
+
+  const handleMouseMove = useCallback(
+    (evt: MouseEvent<HTMLCanvasElement>) => {
+      const x = getCanvasX(evt);
+
+      switch (mode) {
+        case Mode.Normal: {
+          if (isHoveringSelectionStart(x)) {
+            setHoverState(HoverState.OverSelectionStart);
+            setCursor('col-resize');
+          } else if (isHoveringSelectionEnd(x)) {
+            setHoverState(HoverState.OverSelectionEnd);
+            setCursor('col-resize');
+          } else if (isHoveringSelection(x)) {
+            setHoverState(HoverState.OverSelection);
+            setCursor('pointer');
+          } else {
+            setCursor('auto');
+          }
           break;
         }
+        case Mode.ResizingStart: {
+          const diff = x - moveOffsetX.current;
+          const start = constrainXToCanvas(selection.start + diff);
 
-        setNewSelection({ ...selection, start: start });
-        break;
-      }
-      case Mode.ResizingEnd: {
-        const diff = x - moveOffsetX.current;
-        const end = constrainXToCanvas(selection.end + diff);
+          if (start > selection.end) {
+            setNewSelection({ start: selection.end, end: start });
+            break;
+          }
 
-        if (end < selection.start) {
-          setNewSelection({ start: Math.max(0, end), end: selection.start });
+          setNewSelection({ ...selection, start: start });
           break;
         }
+        case Mode.ResizingEnd: {
+          const diff = x - moveOffsetX.current;
+          const end = constrainXToCanvas(selection.end + diff);
 
-        setNewSelection({ ...selection, end: end });
-        break;
-      }
-      case Mode.Dragging: {
-        const diff = x - moveOffsetX.current;
-        const selectionWidth = selection.end - selection.start;
-        let start = Math.max(0, selection.start + diff);
-        let end = start + selectionWidth;
-        if (end > width) {
-          end = width;
-          start = end - selectionWidth;
+          if (end < selection.start) {
+            setNewSelection({ start: Math.max(0, end), end: selection.start });
+            break;
+          }
+
+          setNewSelection({ ...selection, end: end });
+          break;
         }
+        case Mode.Dragging: {
+          const diff = x - moveOffsetX.current;
+          const selectionWidth = selection.end - selection.start;
+          let start = Math.max(0, selection.start + diff);
+          let end = start + selectionWidth;
+          if (end > width) {
+            end = width;
+            start = end - selectionWidth;
+          }
 
-        setNewSelection({ start: start, end: end });
-        break;
-      }
-      case Mode.Selecting: {
-        if (x < moveOffsetX.current) {
-          setNewSelection({
-            start: x,
-            end: moveOffsetX.current,
-          });
-        } else {
-          setNewSelection({ start: moveOffsetX.current, end: x });
+          setNewSelection({ start: start, end: end });
+          break;
+        }
+        case Mode.Selecting: {
+          if (x < moveOffsetX.current) {
+            setNewSelection({
+              start: x,
+              end: moveOffsetX.current,
+            });
+          } else {
+            setNewSelection({ start: moveOffsetX.current, end: x });
+          }
+          break;
         }
-        break;
       }
-    }
-  };
+    },
+    [mode, selection]
+  );
 
-  const handleMouseUp = () => {
+  const handleMouseUp = useCallback(() => {
     if (mode == Mode.Normal) {
       return;
     }
@@ -283,7 +289,7 @@ export const HudCanvas: React.FC<Props> = ({
     }
 
     onSelectionChange({ ...newSelection });
-  };
+  }, [mode, newSelection]);
 
   const handleEmptySelectionAction = useCallback(() => {
     switch (emptySelectionAction) {