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,5 +1,6 @@
'use client';
import React, { useMemo } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Card, CardContent } from '@/components/ui/card';
@@ -7,7 +8,6 @@ import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Story } from '@/types/project';
import { FileText, FolderKanban, Clock, CheckSquare } from 'lucide-react';
import { useMemo } from 'react';
interface StoryCardProps {
story: Story;
@@ -15,7 +15,7 @@ interface StoryCardProps {
taskCount?: number;
}
export function StoryCard({ story, epicName, taskCount }: StoryCardProps) {
export const StoryCard = React.memo(function StoryCard({ story, epicName, taskCount }: StoryCardProps) {
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id: story.id });
@@ -140,4 +140,4 @@ export function StoryCard({ story, epicName, taskCount }: StoryCardProps) {
</CardContent>
</Card>
);
}
});