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,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 (
|
||||
|
||||
Reference in New Issue
Block a user