diff --git a/frontend/src/components/TransactionsTable.tsx b/frontend/src/components/TransactionsTable.tsx index a8a90b8..bd4152a 100644 --- a/frontend/src/components/TransactionsTable.tsx +++ b/frontend/src/components/TransactionsTable.tsx @@ -126,7 +126,10 @@ export default function TransactionsTable() { placeholderData: (previousData) => previousData, }); - const transactions = transactionsResponse?.data || []; + const transactions = useMemo( + () => transactionsResponse?.data || [], + [transactionsResponse], + ); const pagination = useMemo( () => transactionsResponse @@ -142,6 +145,31 @@ export default function TransactionsTable() { [transactionsResponse], ); + // Calculate stats from current page transactions, memoized for performance + const 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) + ); + + // Get currency from first transaction, fallback to EUR + const displayCurrency = transactions.length > 0 ? transactions[0].transaction_currency : "EUR"; + + return { + totalCount: pagination?.total || 0, + pageCount: transactions.length, + totalIncome, + totalExpenses, + netChange: totalIncome - totalExpenses, + displayCurrency, + }; + }, [transactions, pagination]); + // Check if search is currently debouncing const isSearchLoading = filterState.searchTerm !== debouncedSearchTerm; @@ -356,31 +384,6 @@ export default function TransactionsTable() { ); } - // 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) - ); - - // 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, - }; - - return { totalIncome, totalExpenses, displayCurrency, stats }; - }, [transactions, pagination]); return (