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,15 +192,10 @@ function App(): JSX.Element {
 
   const offsetPixels = Math.floor(thumbnailWidth / 2);
 
-  if (mediaSet == null) {
+  // Avoid re-rendering this component during playback. Needs to be memoized
-    // TODO: improve
+  // before the mediaSet null check below.
-    return <></>;
+  const controlBar = useMemo(
-  }
+    () => (
-
-  return (
-    <>
-      <div className="App">
-        <div style={containerStyles}>
       <ControlBar
         onPlay={() => {
           audio.play();
@@ -211,7 +206,20 @@ function App(): JSX.Element {
           audio.pause();
         }}
       />
+    ),
+    []
+  );
 
+  if (mediaSet == null) {
+    // TODO: improve
+    return <></>;
+  }
+
+  return (
+    <>
+      <div className="App">
+        <div style={containerStyles}>
+          {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,6 +336,8 @@ export const Overview: React.FC<Props> = ({
   return (
     <>
       <div style={containerStyles}>
+        {useMemo(
+          () => (
             <WaveformCanvas
               peaks={peaks}
               channels={mediaSet.audioChannels}
@@ -346,6 +348,9 @@ export const Overview: React.FC<Props> = ({
               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,6 +112,8 @@ export const Waveform: React.FC<Props> = ({
   return (
     <>
       <div style={containerStyles}>
+        {useMemo(
+          () => (
             <WaveformCanvas
               peaks={peaks}
               channels={mediaSet.audioChannels}
@@ -122,6 +124,9 @@ export const Waveform: React.FC<Props> = ({
               zIndex={0}
               alpha={1}
             ></WaveformCanvas>
+          ),
+          [peaks, mediaSet]
+        )}
         <canvas
           width={CanvasLogicalWidth}
           height={CanvasLogicalHeight}