perf(frontend): Optimize component rendering with React.memo and hooks - Sprint 3 Story 2

Add React.memo to display components and useCallback/useMemo for better performance.

Changes:
- Added React.memo to TaskCard component
- Added React.memo to StoryCard component
- Added React.memo to KanbanBoard component
- Added React.memo to KanbanColumn component
- Added useCallback to kanban page drag handlers (handleDragStart, handleDragEnd)
- Added useCallback to epics page handlers (handleDelete, getStatusColor, getPriorityColor)
- Added useMemo for expensive computations in dashboard page (stats, recentProjects sorting)
- Added useMemo for total tasks calculation in KanbanBoard
- Removed unused isConnected variable from kanban page

Performance improvements:
- Reduced unnecessary re-renders in Card components
- Optimized list rendering performance with memoized callbacks
- Improved filtering and sorting performance with useMemo
- Better React DevTools Profiler metrics

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-05 19:57:07 +01:00
parent bb3a93bfdc
commit 358ee9b7f4
7 changed files with 39 additions and 29 deletions

View File

@@ -1,6 +1,6 @@
'use client';
import { use, useState } from 'react';
import { use, useState, useCallback } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
@@ -62,7 +62,7 @@ export default function EpicsPage({ params }: EpicsPageProps) {
const { data: epics, isLoading: epicsLoading, error } = useEpics(projectId);
const deleteEpic = useDeleteEpic();
const handleDelete = async () => {
const handleDelete = useCallback(async () => {
if (!deletingEpicId) return;
try {
@@ -72,9 +72,9 @@ export default function EpicsPage({ params }: EpicsPageProps) {
const message = error instanceof Error ? error.message : 'Failed to delete epic';
toast.error(message);
}
};
}, [deletingEpicId, deleteEpic]);
const getStatusColor = (status: WorkItemStatus) => {
const getStatusColor = useCallback((status: WorkItemStatus) => {
switch (status) {
case 'Backlog':
return 'secondary';
@@ -87,9 +87,9 @@ export default function EpicsPage({ params }: EpicsPageProps) {
default:
return 'secondary';
}
};
}, []);
const getPriorityColor = (priority: WorkItemPriority) => {
const getPriorityColor = useCallback((priority: WorkItemPriority) => {
switch (priority) {
case 'Low':
return 'bg-blue-100 text-blue-700 hover:bg-blue-100';
@@ -102,7 +102,7 @@ export default function EpicsPage({ params }: EpicsPageProps) {
default:
return 'secondary';
}
};
}, []);
if (projectLoading || epicsLoading) {
return (