From 5a384886fb11a06f7bc6ee02e6983f73a2c753c1 Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Mon, 25 Nov 2024 15:18:09 -0800
Subject: [PATCH 1/2] Update FeedItem with previous PR suggestions

---
 ui/src/components/Bouts/FeedItem.tsx | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/Bouts/FeedItem.tsx b/ui/src/components/Bouts/FeedItem.tsx
index 949f2b45..61a12776 100644
--- a/ui/src/components/Bouts/FeedItem.tsx
+++ b/ui/src/components/Bouts/FeedItem.tsx
@@ -25,6 +25,8 @@ import {
 import { useListenerCount } from "@/hooks/useFeedPresence";
 import { formatTimestamp } from "@/utils/time";
 
+const categories: Array<DetectionCategory> = ["WHALE", "VESSEL", "OTHER"];
+
 export default function FeedItem({
   feed,
   onStatUpdate,
@@ -32,11 +34,6 @@ export default function FeedItem({
   feed: Pick<Feed, "id" | "name" | "slug" | "online">;
   onStatUpdate?: (feedId: string, stat: string, value: number) => void;
 }) {
-  const categories: Array<DetectionCategory> = useMemo(
-    () => ["WHALE", "VESSEL", "OTHER"],
-    [],
-  );
-
   const [showTable, setShowTable] = useState(false);
   const [selectedCategory, setSelectedCategory] = useState<DetectionCategory>();
   const theme = useTheme();
@@ -64,14 +61,15 @@ export default function FeedItem({
       ? recentDetections.filter((det) => det.category === selectedCategory)
       : recentDetections;
 
+  const fifteenMinutesAgo = new Date(now.valueOf() - 15 * 60 * 1000);
+  const fiveMinutesAgo = new Date(now.valueOf() - 5 * 60 * 1000);
+
   const detsCount = recentDetections.length;
   const detsCount15MinAgo = recentDetections.filter(
-    ({ timestamp }) =>
-      new Date(timestamp) > new Date(now.valueOf() - 15 * 60 * 1000),
+    ({ timestamp }) => new Date(timestamp) > fifteenMinutesAgo,
   ).length;
   const detsCount5MinAgo = recentDetections.filter(
-    ({ timestamp }) =>
-      new Date(timestamp) > new Date(now.valueOf() - 5 * 60 * 1000),
+    ({ timestamp }) => new Date(timestamp) > fiveMinutesAgo,
   ).length;
 
   const detectionChartData = useMemo(
@@ -104,14 +102,7 @@ export default function FeedItem({
         );
       });
     }
-  }, [
-    feed.id,
-    recentDetections,
-    detsCount,
-    onStatUpdate,
-    listenerCount,
-    categories,
-  ]);
+  }, [feed.id, recentDetections, detsCount, onStatUpdate, listenerCount]);
 
   return (
     <Card sx={{ width: "100%", p: 2, overflowX: "auto" }} elevation={1}>

From 9fd74369d6aec83bf5003e071bf780b50db261cf Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Mon, 25 Nov 2024 15:24:39 -0800
Subject: [PATCH 2/2] Update times with useMemo

---
 ui/src/components/Bouts/FeedItem.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Bouts/FeedItem.tsx b/ui/src/components/Bouts/FeedItem.tsx
index 61a12776..be1cef46 100644
--- a/ui/src/components/Bouts/FeedItem.tsx
+++ b/ui/src/components/Bouts/FeedItem.tsx
@@ -61,8 +61,14 @@ export default function FeedItem({
       ? recentDetections.filter((det) => det.category === selectedCategory)
       : recentDetections;
 
-  const fifteenMinutesAgo = new Date(now.valueOf() - 15 * 60 * 1000);
-  const fiveMinutesAgo = new Date(now.valueOf() - 5 * 60 * 1000);
+  const fifteenMinutesAgo = useMemo(
+    () => new Date(now.valueOf() - 15 * 60 * 1000),
+    [now],
+  );
+  const fiveMinutesAgo = useMemo(
+    () => new Date(now.valueOf() - 5 * 60 * 1000),
+    [now],
+  );
 
   const detsCount = recentDetections.length;
   const detsCount15MinAgo = recentDetections.filter(