From 5920033f813256d309a126607e3be0a3c39bb966 Mon Sep 17 00:00:00 2001
From: Achilles <achilles@Achilless-MacBook-Pro.local>
Date: Wed, 14 Jan 2026 20:14:38 -0600
Subject: [PATCH] Fix technical debt: resolve N+1 query and unnecessary
 re-renders

- Backend: Add eager loading of category relationship in TransactionController::index()
  to prevent N+1 queries when fetching transactions list
- Frontend: Memoize TransactionList component and use useCallback for
  handleUserProfileClick to prevent unnecessary re-renders when App state changes
---
 backend/src/Controllers/TransactionController.php | 2 ++
 frontend/src/App.tsx                              | 6 +++---
 frontend/src/components/TransactionList.tsx       | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/backend/src/Controllers/TransactionController.php b/backend/src/Controllers/TransactionController.php
index 60f4d25..1bd5e07 100644
--- a/backend/src/Controllers/TransactionController.php
+++ b/backend/src/Controllers/TransactionController.php
@@ -26,6 +26,8 @@ public function index(Request $request, Response $response): Response
         $transactionRepo = $this->em->getRepository(Transaction::class);
 
         $transactions = $transactionRepo->createQueryBuilder('t')
+            ->leftJoin('t.category', 'c')
+            ->addSelect('c')
             ->setFirstResult($skip)
             ->setMaxResults($limit)
             ->getQuery()
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4bcf768..0757369 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import './App.css';
 import Header from './components/Header';
 import TransactionList from './components/TransactionList';
@@ -6,10 +6,10 @@ import TransactionList from './components/TransactionList';
 function App() {
   const [userActivityCount, setUserActivityCount] = useState(0);
 
-  const handleUserProfileClick = () => {
+  const handleUserProfileClick = useCallback(() => {
     console.log("User profile clicked!");
     setUserActivityCount(prev => prev + 1);
-  };
+  }, []);
 
   return (
     <div className="App min-h-screen bg-gray-100 flex flex-col">
diff --git a/frontend/src/components/TransactionList.tsx b/frontend/src/components/TransactionList.tsx
index adbfd1d..10ded29 100644
--- a/frontend/src/components/TransactionList.tsx
+++ b/frontend/src/components/TransactionList.tsx
@@ -99,4 +99,4 @@ const TransactionList: React.FC = () => {
   );
 };
 
-export default TransactionList;
\ No newline at end of file
+export default React.memo(TransactionList);
\ No newline at end of file