perf upgrade

src/features/matches/components/match-card.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { Match } from "../types";
 import TeamAvatar from "@/components/team-avatar";
 import EmojiBar from "@/features/reactions/components/emoji-bar";
-import { Suspense } from "react";
+import { memo, Suspense } from "react";
 import { useSheet } from "@/hooks/use-sheet";
 import Sheet from "@/components/sheet/sheet";
 import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
@@ -237,4 +237,4 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
   );
 };
 
-export default MatchCard;
+export default memo(MatchCard);

src/features/matches/components/match-list.tsx

@@ -1,4 +1,5 @@
 import { Stack, Text } from "@mantine/core";
+import { useMemo } from "react";
 import { Match } from "../types";
 import MatchCard from "./match-card";
 
@@ -8,9 +9,15 @@ interface MatchListProps {
 }
 
 const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
-  const filteredMatches = matches?.filter(match =>
-    match.home && match.away && !match.bye && match.status != "tbd"
-  ).sort((a, b) => a.start_time < b.start_time ? 1 : -1) || [];
+  const filteredMatches = useMemo(
+    () =>
+      [...(matches ?? [])]
+        .filter(match =>
+          match.home && match.away && !match.bye && match.status != "tbd"
+        )
+        .sort((a, b) => a.start_time < b.start_time ? 1 : -1),
+    [matches]
+  );
 
   if (!filteredMatches.length) {
     return undefined;