refactor: memoize variable

js/src/pages/stream-player-page.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useState } from "react";
+import { useEffect, useCallback, useState, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -30,14 +30,19 @@ export function StreamPlayerPage() {
   const pause = usePlaybackStore((s) => s.pause);
   const resume = usePlaybackStore((s) => s.resume);
 
-  // Find the stream and its parent network
-  const networkWithStream = networks.find((n) =>
-    n.streams.some((s) => s.id === streamId),
-  );
-  const stream = networkWithStream?.streams.find((s) => s.id === streamId);
+  const networkForStream = useMemo(() => {
+    return networks.find((n) =>
+      n.streams.some((s) => s.id === streamId),
+    );
+  }, [networks, streamId]);
+
+  const stream = useMemo(() => {
+    if (!networkForStream) return null;
+    return networkForStream.streams.find((s) => s.id === streamId) || null;
+  }, [networkForStream, streamId]);
 
   const { startRecording, stopRecording, cancelRecording, confirmSend } =
-    useRecorder(streamId ?? null, networkWithStream?.id ?? null);
+    useRecorder(streamId ?? null, networkForStream?.id ?? null);
 
   useEffect(() => {
     if (!stream) return;