Remove most useCallback usages

It is unclear whether these are actually significantly improving
performance and they add non-trivial complexity to the codebase,
especially when under heavy frontend development. Removing most of them
for now until it can be shown they are actually worthwhile.

frontend/src/App.tsx

@@ -181,8 +181,7 @@ function App(): JSX.Element {
 
   // handlers
 
-  const handleKeyPress = useCallback(
-    (evt: KeyboardEvent) => {
+  const handleKeyPress = (evt: KeyboardEvent) => {
     if (evt.code != 'Space') {
       return;
     }
@@ -192,13 +191,10 @@ function App(): JSX.Element {
     } else {
       handlePause();
     }
-    },
-    [selection]
-  );
+  };
 
   // handler called when the selection in the overview (zoom setting) is changed.
-  const handleOverviewSelectionChange = useCallback(
-    (newViewport: Frames) => {
+  const handleOverviewSelectionChange = (newViewport: Frames) => {
     if (mediaSet == null) {
       return;
     }
@@ -210,13 +206,10 @@ function App(): JSX.Element {
     }
 
     setPositionFromFrame(newViewport.start);
-    },
-    [mediaSet, audio, video, selection]
-  );
+  };
 
   // handler called when the selection in the main waveform view is changed.
-  const handleWaveformSelectionChange = useCallback(
-    (newSelection: Frames) => {
+  const handleWaveformSelectionChange = (newSelection: Frames) => {
     setSelection(newSelection);
 
     if (mediaSet == null) {
@@ -229,34 +222,32 @@ function App(): JSX.Element {
       (mediaSet.audioFrames / mediaSet.audioSampleRate) * ratio;
     audio.currentTime = currentTime;
     video.currentTime = currentTime;
-    },
-    [mediaSet, audio, video, selection]
-  );
+  };
 
-  const handlePlay = useCallback(() => {
+  const handlePlay = () => {
     audio.play();
     video.play();
-  }, [audio, video]);
+  };
 
-  const handlePause = useCallback(() => {
+  const handlePause = () => {
     video.pause();
     audio.pause();
 
     if (selection.start != selection.end) {
       setPositionFromFrame(selection.start);
     }
-  }, [audio, video, selection]);
+  };
 
-  const handleClip = useCallback(() => {
+  const handleClip = () => {
     if (!window.showSaveFilePicker) {
       downloadClipHTTP();
       return;
     }
 
     downloadClipFileSystemAccessAPI();
-  }, [mediaSet, selection]);
+  };
 
-  const downloadClipHTTP = useCallback(() => {
+  const downloadClipHTTP = () => {
     (async function () {
       if (mediaSet == null) {
         return;
@@ -285,9 +276,9 @@ function App(): JSX.Element {
       document.body.appendChild(form);
       form.submit();
     })();
-  }, [mediaSet, selection]);
+  };
 
-  const downloadClipFileSystemAccessAPI = useCallback(() => {
+  const downloadClipFileSystemAccessAPI = () => {
     (async function () {
       if (mediaSet == null) {
         return;
@@ -312,9 +303,9 @@ function App(): JSX.Element {
       await fileStream.close();
       console.debug('closed stream');
     })();
-  }, [mediaSet, selection]);
+  };
 
-  const handleZoomIn = useCallback(() => {
+  const handleZoomIn = () => {
     if (mediaSet == null) {
       return;
     }
@@ -325,9 +316,9 @@ function App(): JSX.Element {
       ...viewport,
       end: viewport.end - Math.round((viewport.end - viewport.start) / 2),
     });
-  }, [mediaSet, viewport]);
+  };
 
-  const handleZoomOut = useCallback(() => {
+  const handleZoomOut = () => {
     if (mediaSet == null) {
       return;
     }
@@ -342,7 +333,7 @@ function App(): JSX.Element {
       ...viewport,
       end: end,
     });
-  }, [mediaSet, viewport]);
+  };
 
   const setPositionFromFrame = useCallback(
     (frame: number) => {
@@ -355,7 +346,7 @@ function App(): JSX.Element {
       audio.currentTime = currentTime;
       video.currentTime = currentTime;
     },
-    [mediaSet, audio, video]
+    [mediaSet]
   );
 
   // helpers

frontend/src/HudCanvas.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback, MouseEvent } from 'react';
+import { useState, useEffect, useRef, MouseEvent } from 'react';
 
 interface Styles {
   borderLineWidth: number;
@@ -174,8 +174,7 @@ export const HudCanvas: React.FC<Props> = ({
     return x;
   };
 
-  const handleMouseDown = useCallback(
-    (evt: MouseEvent<HTMLCanvasElement>) => {
+  const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
     if (mode != Mode.Normal) {
       return;
     }
@@ -198,12 +197,9 @@ export const HudCanvas: React.FC<Props> = ({
       moveOffsetX.current = x;
       setNewSelection({ start: x, end: x });
     }
-    },
-    [mode, selection]
-  );
+  };
 
-  const handleMouseMove = useCallback(
-    (evt: MouseEvent<HTMLCanvasElement>) => {
+  const handleMouseMove = (evt: MouseEvent<HTMLCanvasElement>) => {
     const x = getCanvasX(evt);
 
     switch (mode) {
@@ -271,11 +267,9 @@ export const HudCanvas: React.FC<Props> = ({
         break;
       }
     }
-    },
-    [mode, selection]
-  );
+  };
 
-  const handleMouseUp = useCallback(() => {
+  const handleMouseUp = () => {
     if (mode == Mode.Normal) {
       return;
     }
@@ -289,9 +283,9 @@ export const HudCanvas: React.FC<Props> = ({
     }
 
     onSelectionChange({ ...newSelection });
-  }, [mode, newSelection]);
+  };
 
-  const handleEmptySelectionAction = useCallback(() => {
+  const handleEmptySelectionAction = () => {
     switch (emptySelectionAction) {
       case EmptySelectionAction.SelectPrevious:
         setNewSelection({ ...selection });
@@ -300,7 +294,7 @@ export const HudCanvas: React.FC<Props> = ({
         onSelectionChange({ start: 0, end: 0 });
         break;
     }
-  }, [selection]);
+  };
 
   const handleMouseLeave = (_evt: MouseEvent<HTMLCanvasElement>) => {
     setHoverState(HoverState.Normal);

frontend/src/Overview.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 import { MediaSet } from './generated/media_set';
 import { Frames, VideoPosition } from './App';
 import { WaveformCanvas } from './WaveformCanvas';
@@ -60,15 +60,12 @@ export const Overview: React.FC<Props> = ({
   // handlers
 
   // convert selection change from canvas pixels to frames, and trigger callback.
-  const handleSelectionChange = useCallback(
-    ({ start, end }: Selection) => {
+  const handleSelectionChange = ({ start, end }: Selection) => {
     onSelectionChange({
       start: Math.round((start / CanvasLogicalWidth) * mediaSet.audioFrames),
       end: Math.round((end / CanvasLogicalWidth) * mediaSet.audioFrames),
     });
-    },
-    [mediaSet]
-  );
+  };
 
   // render component
 

frontend/src/Waveform.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState } from 'react';
 import { Frames, VideoPosition, newRPC } from './App';
 import { MediaSetServiceClientImpl, MediaSet } from './generated/media_set';
 import { WaveformCanvas } from './WaveformCanvas';
@@ -93,12 +93,10 @@ export const Waveform: React.FC<Props> = ({
 
   // handlers
 
-  const handleSelectionChange = useCallback(
-    (selection: Selection) => {
+  const handleSelectionChange = (selection: Selection) => {
     setSelectedPixels(selection);
 
-      const framesPerPixel =
-        (viewport.end - viewport.start) / CanvasLogicalWidth;
+    const framesPerPixel = (viewport.end - viewport.start) / CanvasLogicalWidth;
     const selectedFrames = {
       start: Math.round(viewport.start + selection.start * framesPerPixel),
       end: Math.round(viewport.start + selection.end * framesPerPixel),
@@ -106,20 +104,14 @@ export const Waveform: React.FC<Props> = ({
 
     setSelectedFrames(selectedFrames);
     onSelectionChange(selectedFrames);
-    },
-    [viewport, selectedFrames]
-  );
+  };
 
   // helpers
 
-  const frameToCanvasX = useCallback(
-    (frame: number): number => {
-      const pixelsPerFrame =
-        CanvasLogicalWidth / (viewport.end - viewport.start);
+  const frameToCanvasX = (frame: number): number => {
+    const pixelsPerFrame = CanvasLogicalWidth / (viewport.end - viewport.start);
     return Math.round((frame - viewport.start) * pixelsPerFrame);
-    },
-    [viewport]
-  );
+  };
 
   // render component