useCallback instead of useEffect for PreviewLiveView

charlielee · Nov 27, 2023 · 35290c0 · 35290c0
1 parent f74bd9b
commit 35290c0
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/src/renderer/components/animator/Preview/PreviewLiveView/PreviewLiveView.tsx b/src/renderer/components/animator/Preview/PreviewLiveView/PreviewLiveView.tsx
@@ -1,19 +1,19 @@
-import { useEffect, useRef } from "react";
+import { useCallback } from "react";
 import "./PreviewLiveView.css";
 
 interface PreviewLiveViewProps {
   stream: MediaStream | undefined;
 }
 
 const PreviewLiveView = ({ stream }: PreviewLiveViewProps): JSX.Element => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (video) {
-      video.srcObject = stream ?? null;
-    }
-  }, [stream]);
+  const videoRef = useCallback(
+    (video: HTMLVideoElement | null) => {
+      if (video) {
+        video.srcObject = stream ?? null;
+      }
+    },
+    [stream]
+  );
 
   return <video className="preview-live-view" autoPlay ref={videoRef}></video>;
 };