From 37011c2fdabe0286132928acb167b9c0274ed496 Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Thu, 2 Jun 2022 14:39:53 -0500
Subject: [PATCH] improvement: use useCallback instead of setting ref
 auto-magically

---
 .../components/HistoryViewer/HistoryVideo.tsx   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/components/HistoryViewer/HistoryVideo.tsx b/web/src/components/HistoryViewer/HistoryVideo.tsx
index 5880508e8..d80abd33a 100644
--- a/web/src/components/HistoryViewer/HistoryVideo.tsx
+++ b/web/src/components/HistoryViewer/HistoryVideo.tsx
@@ -41,11 +41,16 @@ export const HistoryVideo = ({
     videoUrl: '',
   });
 
-  useEffect(() => {
-    if (posterLoaded && videoRef.current) {
-      setVideoHeight(videoRef.current?.offsetHeight);
-    }
-  }, [posterLoaded, videoRef.current]);
+  const videoCallback = useCallback(
+    (domNode: any) => {
+      videoRef.current = domNode;
+
+      if (posterLoaded) {
+        setVideoHeight(videoRef.current?.offsetHeight);
+      }
+    },
+    [posterLoaded]
+  );
 
   useEffect(() => {
     const idExists = !isNullOrUndefined(id);
@@ -123,7 +128,7 @@ export const HistoryVideo = ({
   const { posterUrl, videoUrl } = videoProperties;
   return (
     <video
-      ref={videoRef}
+      ref={videoCallback}
       key={posterUrl}
       onTimeUpdate={onTimeUpdateHandler}
       onPause={onPause}