Fix technical debt: resolve N+1 query and unnecessary re-renders #2
+6
−4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What I Did
Fixed two performance issues:
leftJoinandaddSelect.TransactionListby wrapping it withReact.memo()and usinguseCallback()for the user profile click handler.Depends On
N/A
How to Test
./run.shhttp://localhost:3000./run-tests.shto ensure existing functionality worksArchitectural Decision Record (ADR)
leftJoinwithaddSelectfor eager loading, matching the pattern already used inshow()anddelete()methods. This ensures all category data is fetched in a single query instead of N+1 queries.React.memo()to prevent re-renders when props haven't changed, anduseCallback()to maintain stable function references. This is a lightweight solution that doesn't require restructuring the component hierarchy.AI Usage Summary
Used AI tools to identify the root causes of both performance issues and verify the fixes follow best practices.