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:
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user