From 6053abbf3537bb4875a7bfed1e941d10c3b3f3a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elisi=C3=A1rio=20Couto?=
 <elisiariocouto@users.noreply.github.com>
Date: Mon, 8 Dec 2025 21:22:15 +0000
Subject: [PATCH] Update frontend/src/components/TransactionsTable.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/components/TransactionsTable.tsx | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/TransactionsTable.tsx b/frontend/src/components/TransactionsTable.tsx
index 4d25340..a8a90b8 100644
--- a/frontend/src/components/TransactionsTable.tsx
+++ b/frontend/src/components/TransactionsTable.tsx
@@ -356,28 +356,31 @@ export default function TransactionsTable() {
     );
   }
 
-  // Calculate stats from current page transactions
-  const totalIncome = transactions
-    .filter((t: Transaction) => t.transaction_value > 0)
-    .reduce((sum: number, t: Transaction) => sum + t.transaction_value, 0);
+  // Calculate stats from current page transactions, memoized for performance
+  const { totalIncome, totalExpenses, displayCurrency, stats } = useMemo(() => {
+    const totalIncome = transactions
+      .filter((t: Transaction) => t.transaction_value > 0)
+      .reduce((sum: number, t: Transaction) => sum + t.transaction_value, 0);
 
-  const totalExpenses = Math.abs(
-    transactions
-      .filter((t: Transaction) => t.transaction_value < 0)
-      .reduce((sum: number, t: Transaction) => sum + t.transaction_value, 0)
-  );
+    const totalExpenses = Math.abs(
+      transactions
+        .filter((t: Transaction) => t.transaction_value < 0)
+        .reduce((sum: number, t: Transaction) => sum + t.transaction_value, 0)
+    );
 
-  // Get currency from first transaction, fallback to EUR
-  const displayCurrency = transactions.length > 0 ? transactions[0].transaction_currency : "EUR";
+    // Get currency from first transaction, fallback to EUR
+    const displayCurrency = transactions.length > 0 ? transactions[0].transaction_currency : "EUR";
 
-  const stats = {
-    totalCount: pagination?.total || 0,
-    pageCount: transactions.length,
-    totalIncome,
-    totalExpenses,
-    netChange: totalIncome - totalExpenses,
-  };
+    const stats = {
+      totalCount: pagination?.total || 0,
+      pageCount: transactions.length,
+      totalIncome,
+      totalExpenses,
+      netChange: totalIncome - totalExpenses,
+    };
 
+    return { totalIncome, totalExpenses, displayCurrency, stats };
+  }, [transactions, pagination]);
   return (
     <div className="space-y-6 max-w-full">
       {/* New FilterBar */}