frontend: Avoid re-rendering static components during playback

frontend/src/App.tsx

@@ -6,7 +6,7 @@ import {
   GetAudioProgress,
 } from './generated/media_set';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { VideoPreview } from './VideoPreview';
 import { Overview, CanvasLogicalWidth } from './Overview';
 import { Waveform } from './Waveform';
@@ -192,6 +192,24 @@ function App(): JSX.Element {
 
   const offsetPixels = Math.floor(thumbnailWidth / 2);
 
+  // Avoid re-rendering this component during playback. Needs to be memoized
+  // before the mediaSet null check below.
+  const controlBar = useMemo(
+    () => (
+      <ControlBar
+        onPlay={() => {
+          audio.play();
+          video.play();
+        }}
+        onPause={() => {
+          video.pause();
+          audio.pause();
+        }}
+      />
+    ),
+    []
+  );
+
   if (mediaSet == null) {
     // TODO: improve
     return <></>;
@@ -201,17 +219,7 @@ function App(): JSX.Element {
     <>
       <div className="App">
         <div style={containerStyles}>
-          <ControlBar
-            onPlay={() => {
-              audio.play();
-              video.play();
-            }}
-            onPause={() => {
-              video.pause();
-              audio.pause();
-            }}
-          />
-
+          {controlBar}
           <Overview
             peaks={overviewPeaks}
             mediaSet={mediaSet}

frontend/src/Overview.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, MouseEvent } from 'react';
+import { useState, useEffect, useRef, useMemo, MouseEvent } from 'react';
 import { MediaSet } from './generated/media_set';
 import { Frames, VideoPosition } from './App';
 import { WaveformCanvas } from './WaveformCanvas';
@@ -336,16 +336,21 @@ export const Overview: React.FC<Props> = ({
   return (
     <>
       <div style={containerStyles}>
-        <WaveformCanvas
-          peaks={peaks}
-          channels={mediaSet.audioChannels}
-          width={CanvasLogicalWidth}
-          height={CanvasLogicalHeight}
-          strokeStyle="black"
-          fillStyle="#003300"
-          zIndex={1}
-          alpha={1}
-        ></WaveformCanvas>
+        {useMemo(
+          () => (
+            <WaveformCanvas
+              peaks={peaks}
+              channels={mediaSet.audioChannels}
+              width={CanvasLogicalWidth}
+              height={CanvasLogicalHeight}
+              strokeStyle="black"
+              fillStyle="#003300"
+              zIndex={1}
+              alpha={1}
+            ></WaveformCanvas>
+          ),
+          [peaks, mediaSet]
+        )}
         <canvas
           ref={hudCanvasRef}
           width={CanvasLogicalWidth}

frontend/src/Waveform.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import { Frames, VideoPosition, newRPC } from './App';
 import { MediaSetServiceClientImpl, MediaSet } from './generated/media_set';
 import { WaveformCanvas } from './WaveformCanvas';
@@ -112,16 +112,21 @@ export const Waveform: React.FC<Props> = ({
   return (
     <>
       <div style={containerStyles}>
-        <WaveformCanvas
-          peaks={peaks}
-          channels={mediaSet.audioChannels}
-          width={CanvasLogicalWidth}
-          height={CanvasLogicalHeight}
-          strokeStyle="green"
-          fillStyle="black"
-          zIndex={0}
-          alpha={1}
-        ></WaveformCanvas>
+        {useMemo(
+          () => (
+            <WaveformCanvas
+              peaks={peaks}
+              channels={mediaSet.audioChannels}
+              width={CanvasLogicalWidth}
+              height={CanvasLogicalHeight}
+              strokeStyle="green"
+              fillStyle="black"
+              zIndex={0}
+              alpha={1}
+            ></WaveformCanvas>
+          ),
+          [peaks, mediaSet]
+        )}
         <canvas
           width={CanvasLogicalWidth}
           height={CanvasLogicalHeight}