From e486aab7704dc2fa0df68ee5341d9dd5d071b21d Mon Sep 17 00:00:00 2001
From: Rob Watson <rob@netflux.io>
Date: Sat, 4 Dec 2021 05:34:17 +0100
Subject: [PATCH] Prefer React.memo to useMemo when memoizing components

---
 frontend/src/App.tsx            | 33 +++++++++++++--------------------
 frontend/src/ControlBar.tsx     |  9 +++++++--
 frontend/src/Overview.tsx       | 27 +++++++++++----------------
 frontend/src/Waveform.tsx       | 27 +++++++++++----------------
 frontend/src/WaveformCanvas.tsx |  9 ++++++---
 5 files changed, 48 insertions(+), 57 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e02941a..5a10ea5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,7 +6,7 @@ import {
   GetAudioProgress,
 } from './generated/media_set';
 
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { VideoPreview } from './VideoPreview';
 import { Overview, CanvasLogicalWidth } from './Overview';
 import { Waveform } from './Waveform';
@@ -178,6 +178,16 @@ function App(): JSX.Element {
     video.currentTime = currentTime;
   };
 
+  const handlePlay = useCallback(() => {
+    audio.play();
+    video.play();
+  }, [audio, video]);
+
+  const handlePause = useCallback(() => {
+    video.pause();
+    audio.pause();
+  }, [audio, video]);
+
   // render component
 
   const containerStyles = {
@@ -192,24 +202,6 @@ 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 <></>;
@@ -219,7 +211,8 @@ function App(): JSX.Element {
     <>
       <div className="App">
         <div style={containerStyles}>
-          {controlBar}
+          <ControlBar onPlay={handlePlay} onPause={handlePause} />
+
           <Overview
             peaks={overviewPeaks}
             mediaSet={mediaSet}
diff --git a/frontend/src/ControlBar.tsx b/frontend/src/ControlBar.tsx
index bb69deb..0d90157 100644
--- a/frontend/src/ControlBar.tsx
+++ b/frontend/src/ControlBar.tsx
@@ -1,9 +1,11 @@
+import React from 'react';
+
 interface Props {
   onPlay: () => void;
   onPause: () => void;
 }
 
-export const ControlBar: React.FC<Props> = (props: Props) => {
+const ControlBar: React.FC<Props> = React.memo((props: Props) => {
   const styles = { width: '100%', flexGrow: 0 };
   const buttonStyles = {
     cursor: 'pointer',
@@ -27,4 +29,7 @@ export const ControlBar: React.FC<Props> = (props: Props) => {
       </div>
     </>
   );
-};
+});
+
+ControlBar.displayName = 'ControlBar';
+export { ControlBar };
diff --git a/frontend/src/Overview.tsx b/frontend/src/Overview.tsx
index 9103f5b..61dd332 100644
--- a/frontend/src/Overview.tsx
+++ b/frontend/src/Overview.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo, MouseEvent } from 'react';
+import { useState, useEffect, useRef, MouseEvent } from 'react';
 import { MediaSet } from './generated/media_set';
 import { Frames, VideoPosition } from './App';
 import { WaveformCanvas } from './WaveformCanvas';
@@ -336,21 +336,16 @@ export const Overview: React.FC<Props> = ({
   return (
     <>
       <div style={containerStyles}>
-        {useMemo(
-          () => (
-            <WaveformCanvas
-              peaks={peaks}
-              channels={mediaSet.audioChannels}
-              width={CanvasLogicalWidth}
-              height={CanvasLogicalHeight}
-              strokeStyle="black"
-              fillStyle="#003300"
-              zIndex={1}
-              alpha={1}
-            ></WaveformCanvas>
-          ),
-          [peaks, mediaSet]
-        )}
+        <WaveformCanvas
+          peaks={peaks}
+          channels={mediaSet.audioChannels}
+          width={CanvasLogicalWidth}
+          height={CanvasLogicalHeight}
+          strokeStyle="black"
+          fillStyle="#003300"
+          zIndex={1}
+          alpha={1}
+        ></WaveformCanvas>
         <canvas
           ref={hudCanvasRef}
           width={CanvasLogicalWidth}
diff --git a/frontend/src/Waveform.tsx b/frontend/src/Waveform.tsx
index 0f3e8a3..e05b14c 100644
--- a/frontend/src/Waveform.tsx
+++ b/frontend/src/Waveform.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useMemo } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Frames, VideoPosition, newRPC } from './App';
 import { MediaSetServiceClientImpl, MediaSet } from './generated/media_set';
 import { WaveformCanvas } from './WaveformCanvas';
@@ -112,21 +112,16 @@ export const Waveform: React.FC<Props> = ({
   return (
     <>
       <div style={containerStyles}>
-        {useMemo(
-          () => (
-            <WaveformCanvas
-              peaks={peaks}
-              channels={mediaSet.audioChannels}
-              width={CanvasLogicalWidth}
-              height={CanvasLogicalHeight}
-              strokeStyle="green"
-              fillStyle="black"
-              zIndex={0}
-              alpha={1}
-            ></WaveformCanvas>
-          ),
-          [peaks, mediaSet]
-        )}
+        <WaveformCanvas
+          peaks={peaks}
+          channels={mediaSet.audioChannels}
+          width={CanvasLogicalWidth}
+          height={CanvasLogicalHeight}
+          strokeStyle="green"
+          fillStyle="black"
+          zIndex={0}
+          alpha={1}
+        ></WaveformCanvas>
         <canvas
           width={CanvasLogicalWidth}
           height={CanvasLogicalHeight}
diff --git a/frontend/src/WaveformCanvas.tsx b/frontend/src/WaveformCanvas.tsx
index 675753c..5c3ecae 100644
--- a/frontend/src/WaveformCanvas.tsx
+++ b/frontend/src/WaveformCanvas.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Observable } from 'rxjs';
 
 const maxPeakValue = 32_768;
@@ -22,7 +22,7 @@ interface Props {
 // strokeStyle: waveform style
 // fillStyle: background style
 // style: React.CSSProperties applied to canvas element
-export const WaveformCanvas: React.FC<Props> = (props: Props) => {
+const WaveformCanvas: React.FC<Props> = React.memo((props: Props) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -89,4 +89,7 @@ export const WaveformCanvas: React.FC<Props> = (props: Props) => {
       ></canvas>
     </>
   );
-};
+});
+
+WaveformCanvas.displayName = 'WaveformCanvas';
+export { WaveformCanvas };