add memo to heavy components (#183)

frontend/src/components/tasks/TaskDetails/DisplayConversationEntry.tsx

@@ -1,6 +1,6 @@
 import { useContext, useMemo, useState } from 'react';
 import { DiffCard } from './DiffCard';
-import { MarkdownRenderer } from '@/components/ui/markdown-renderer.tsx';
+import MarkdownRenderer from '@/components/ui/markdown-renderer.tsx';
 import {
   AlertCircle,
   Bot,

frontend/src/components/tasks/TaskDetails/LogsTab/NormalizedConversationViewer.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Bot, Hammer, ToggleLeft, ToggleRight } from 'lucide-react';
 import { Loader } from '@/components/ui/loader.tsx';
 import { executionProcessesApi } from '@/lib/api.ts';
-import { MarkdownRenderer } from '@/components/ui/markdown-renderer.tsx';
+import MarkdownRenderer from '@/components/ui/markdown-renderer.tsx';
 import type {
   ExecutionProcess,
   NormalizedConversation,

frontend/src/components/tasks/TaskKanbanBoard.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import {
   type DragEndEvent,
   KanbanBoard,
@@ -44,7 +44,7 @@ const statusBoardColors: Record<TaskStatus, string> = {
   cancelled: 'hsl(var(--destructive))',
 };
 
-export function TaskKanbanBoard({
+function TaskKanbanBoard({
   tasks,
   searchQuery = '',
   onDragEnd,
@@ -108,3 +108,5 @@ export function TaskKanbanBoard({
     </KanbanProvider>
   );
 }
+
+export default memo(TaskKanbanBoard);

frontend/src/components/tasks/index.ts

@@ -1,3 +1,2 @@
 export { TaskFormDialog } from './TaskFormDialog';
 export { TaskCard } from './TaskCard';
-export { TaskKanbanBoard } from './TaskKanbanBoard';

frontend/src/components/ui/markdown-renderer.tsx

@@ -1,18 +1,14 @@
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, { Components } from 'react-markdown';
+import { memo, useMemo } from 'react';
 
 interface MarkdownRendererProps {
   content: string;
   className?: string;
 }
 
-export function MarkdownRenderer({
+function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
-  content,
+  const components: Components = useMemo(
-  className = '',
+    () => ({
-}: MarkdownRendererProps) {
-  return (
-    <div className={className}>
-      <ReactMarkdown
-        components={{
       code: ({ children, ...props }) => (
         <code
           {...props}
@@ -75,10 +71,14 @@ export function MarkdownRenderer({
           {children}
         </li>
       ),
-        }}
+    }),
-      >
+    []
-        {content}
+  );
-      </ReactMarkdown>
+  return (
+    <div className={className}>
+      <ReactMarkdown components={components}>{content}</ReactMarkdown>
     </div>
   );
 }
+
+export default memo(MarkdownRenderer);

frontend/src/pages/project-tasks.tsx

@@ -14,7 +14,7 @@ import {
   getMainContainerClasses,
 } from '@/lib/responsive-config';
 
-import { TaskKanbanBoard } from '@/components/tasks/TaskKanbanBoard';
+import TaskKanbanBoard from '@/components/tasks/TaskKanbanBoard';
 import { TaskDetailsPanel } from '@/components/tasks/TaskDetailsPanel';
 import type {
   CreateTaskAndStart,