feat: refactor project and devlog components to use useCallback for improved performance

tikazyq · tikazyq · commit 11f75e67b313 · 2025-08-24T22:38:01.000+08:00
diff --git a/apps/web/app/projects/[name]/settings/project-settings-page.tsx b/apps/web/app/projects/[name]/settings/project-settings-page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useProjectStore } from '@/stores';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
@@ -79,7 +79,7 @@ export function ProjectSettingsPage() {
     fetchCurrentProject();
   }, [currentProjectName]);
 
-  const handleUpdateProject = async (e: React.FormEvent) => {
+  const handleUpdateProject = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
 
     if (!formData.name.trim()) {
@@ -109,9 +109,9 @@ export function ProjectSettingsPage() {
     } finally {
       setIsUpdating(false);
     }
-  };
+  }, [formData, project, updateProject]);
 
-  const handleDeleteProject = async () => {
+  const handleDeleteProject = useCallback(async () => {
     if (!project) {
       toast.error('Project not found');
       return;
@@ -130,17 +130,22 @@ export function ProjectSettingsPage() {
     } finally {
       setIsDeleting(false);
     }
-  };
+  }, [project, deleteProject, router]);
 
-  const handleResetForm = () => {
+  const handleResetForm = useCallback(() => {
     if (project) {
       setFormData({
         name: project.name,
         description: project.description || '',
       });
       setHasChanges(false);
     }
-  };
+  }, [project]);
+
+  const handleFormChange = useCallback((field: keyof ProjectFormData, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    setHasChanges(true);
+  }, []);
 
   if (currentProjectContext.loading || !project) {
     return (
@@ -250,7 +255,7 @@ export function ProjectSettingsPage() {
                   id="name"
                   placeholder="e.g., My Development Project"
                   value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  onChange={(e) => handleFormChange('name', e.target.value)}
                   required
                 />
               </div>
@@ -261,7 +266,7 @@ export function ProjectSettingsPage() {
                   id="description"
                   placeholder="Describe what this project is about..."
                   value={formData.description || ''}
-                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  onChange={(e) => handleFormChange('description', e.target.value)}
                   rows={3}
                 />
               </div>
diff --git a/apps/web/app/projects/project-list-page.tsx b/apps/web/app/projects/project-list-page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useProjectStore, useRealtimeStore } from '@/stores';
 import { useRouter } from 'next/navigation';
 import { ProjectGridSkeleton } from '@/components/common';
@@ -57,7 +57,7 @@ export function ProjectListPage() {
 
   const { data: projects, loading: isLoadingProjects } = projectsContext;
 
-  const handleCreateProject = async (e: React.FormEvent) => {
+  const handleCreateProject = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
 
     if (!formData.name.trim()) {
@@ -80,16 +80,29 @@ export function ProjectListPage() {
     } finally {
       setCreating(false);
     }
-  };
+  }, [formData, fetchProjects]);
 
-  const handleViewProject = (projectName: string) => {
+  const handleViewProject = useCallback((projectName: string) => {
     router.push(`/projects/${projectName}`);
-  };
+  }, [router]);
 
-  const handleProjectSettings = (e: React.MouseEvent, projectName: string) => {
+  const handleProjectSettings = useCallback((e: React.MouseEvent, projectName: string) => {
     e.stopPropagation(); // Prevent card click from triggering
     router.push(`/projects/${projectName}/settings`);
-  };
+  }, [router]);
+
+  const handleOpenModal = useCallback(() => {
+    setIsModalVisible(true);
+  }, []);
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalVisible(false);
+    setFormData({ name: '', description: '' });
+  }, []);
+
+  const handleFormChange = useCallback((field: keyof ProjectFormData, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  }, []);
 
   if (projectsContext.error) {
     return (
@@ -108,7 +121,7 @@ export function ProjectListPage() {
       <div className="w-full max-w-full p-6">
         <div className="max-w-7xl mx-auto">
           <div className="flex items-center gap-4 mb-6">
-            <Button className="bg-primary" onClick={() => setIsModalVisible(true)}>
+            <Button className="bg-primary" onClick={handleOpenModal}>
               New Project
             </Button>
             <div className="relative">
@@ -177,7 +190,7 @@ export function ProjectListPage() {
                     </p>
                     <Button
                       size="lg"
-                      onClick={() => setIsModalVisible(true)}
+                      onClick={handleOpenModal}
                       className="flex items-center gap-2 px-8 py-3"
                     >
                       <Plus size={18} />
@@ -203,7 +216,7 @@ export function ProjectListPage() {
                 id="name"
                 placeholder="e.g., My-Dev-Project_2025"
                 value={formData.name}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                onChange={(e) => handleFormChange('name', e.target.value)}
                 required
               />
               <p className="text-sm text-muted-foreground mt-1">
@@ -216,18 +229,15 @@ export function ProjectListPage() {
                 id="description"
                 placeholder="Describe what this project is about..."
                 value={formData.description || ''}
-                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                onChange={(e) => handleFormChange('description', e.target.value)}
                 rows={3}
               />
             </div>
             <DialogFooter>
               <Button
                 type="button"
                 variant="outline"
-                onClick={() => {
-                  setIsModalVisible(false);
-                  setFormData({ name: '', description: '' });
-                }}
+                onClick={handleCloseModal}
               >
                 Cancel
               </Button>
diff --git a/apps/web/components/common/overview-stats/overview-stats.tsx b/apps/web/components/common/overview-stats/overview-stats.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { BarChart3 } from 'lucide-react';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -52,32 +52,32 @@ export function OverviewStats({
     return null;
   }
 
-  const isStatusActive = (status: DevlogStatus) => {
+  const isStatusActive = useCallback((status: DevlogStatus) => {
     return !!currentFilters?.status?.includes(status);
-  };
+  }, [currentFilters]);
 
-  const isTotalActive = () => {
+  const isTotalActive = useCallback(() => {
     return (
       (!currentFilters?.filterType || currentFilters.filterType === 'total') &&
       (!currentFilters?.status || currentFilters.status.length === 0)
     );
-  };
+  }, [currentFilters]);
 
-  const isOpenActive = () => {
+  const isOpenActive = useCallback(() => {
     return currentFilters?.filterType === 'open';
-  };
+  }, [currentFilters]);
 
-  const isClosedActive = () => {
+  const isClosedActive = useCallback(() => {
     return currentFilters?.filterType === 'closed';
-  };
+  }, [currentFilters]);
 
-  const handleStatClick = (status: FilterType) => {
+  const handleStatClick = useCallback((status: FilterType) => {
     if (onFilterToggle) {
       onFilterToggle(status);
     }
-  };
+  }, [onFilterToggle]);
 
-  const getStatClasses = (filterType: FilterType, isIndividualStatus = false) => {
+  const getStatClasses = useCallback((filterType: FilterType, isIndividualStatus = false) => {
     let isActive: boolean;
     if (filterType === 'total') {
       isActive = isTotalActive();
@@ -99,9 +99,9 @@ export function OverviewStats({
         'hover:bg-muted': isClickable && !isActive,
       },
     );
-  };
+  }, [isTotalActive, isOpenActive, isClosedActive, isStatusActive, onFilterToggle]);
 
-  const getStatusColor = (status: DevlogStatus) => {
+  const getStatusColor = useCallback((status: DevlogStatus) => {
     const colors = {
       new: 'text-blue-600',
       'in-progress': 'text-orange-600',
@@ -112,7 +112,7 @@ export function OverviewStats({
       cancelled: 'text-gray-600',
     };
     return colors[status] || 'text-foreground';
-  };
+  }, []);
 
   const StatItem = ({
     value,
diff --git a/apps/web/components/custom/editable-field.tsx b/apps/web/components/custom/editable-field.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import {
@@ -66,30 +66,26 @@ export function EditableField({
     }
   }, [isEditing]);
 
-  const handleSave = () => {
+  const handleSave = useCallback(() => {
     onSave(editValue);
     setIsEditing(false);
-  };
+  }, [editValue, onSave]);
 
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     setEditValue(value);
     setIsEditing(false);
-  };
+  }, [value]);
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
+  const handleKeyPress = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !multiline && type !== 'textarea') {
       e.preventDefault();
       handleSave();
     } else if (e.key === 'Escape') {
       handleCancel();
     }
-  };
-
-  const handleBlur = () => {
-    handleBlurWithValue(editValue);
-  };
+  }, [multiline, type, handleSave, handleCancel]);
 
-  const handleBlurWithValue = (currentValue: string) => {
+  const handleBlurWithValue = useCallback((currentValue: string) => {
     if (draftMode) {
       // In draft mode, just save the local value and exit edit mode
       // The parent component will handle when to actually save
@@ -101,20 +97,44 @@ export function EditableField({
       // Original behavior: save changes when losing focus
       handleSave();
     }
-  };
+  }, [draftMode, value, onSave, handleSave]);
+
+  const handleBlur = useCallback(() => {
+    handleBlurWithValue(editValue);
+  }, [editValue, handleBlurWithValue]);
 
-  const handleEnterEdit = () => {
+  const handleEnterEdit = useCallback(() => {
     setIsEditing(true);
-  };
+  }, []);
+
+  const handleEditValueChange = useCallback((newValue: string) => {
+    setEditValue(newValue);
+  }, []);
+
+  const handleSelectValueChange = useCallback((newValue: string) => {
+    setEditValue(newValue);
+    if (draftMode) {
+      if (newValue !== value) {
+        onSave(newValue);
+      }
+      setIsEditing(false);
+    }
+  }, [draftMode, value, onSave]);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
 
   const renderInput = () => {
     if (type === 'markdown') {
       return (
         <MarkdownEditor
           value={editValue || ''}
-          onChange={(value) => {
-            setEditValue(value);
-          }}
+          onChange={handleEditValueChange}
           onBlur={handleBlurWithValue}
           onCancel={handleCancel}
           placeholder={placeholder}
@@ -127,15 +147,7 @@ export function EditableField({
       return (
         <Select
           value={editValue}
-          onValueChange={(newValue) => {
-            setEditValue(newValue);
-            if (draftMode) {
-              if (newValue !== value) {
-                onSave(newValue);
-              }
-              setIsEditing(false);
-            }
-          }}
+          onValueChange={handleSelectValueChange}
           open={isEditing}
           onOpenChange={setIsEditing}
         >
@@ -163,7 +175,7 @@ export function EditableField({
         <Textarea
           ref={textareaRef}
           value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
+          onChange={(e) => handleEditValueChange(e.target.value)}
           onKeyDown={handleKeyPress}
           onBlur={handleBlur}
           placeholder={placeholder}
@@ -178,7 +190,7 @@ export function EditableField({
         <Input
           ref={inputRef}
           value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
+          onChange={(e) => handleEditValueChange(e.target.value)}
           onKeyDown={handleKeyPress}
           onBlur={handleBlur}
           placeholder={placeholder}
@@ -216,8 +228,8 @@ export function EditableField({
         className,
       )}
       onClick={handleEnterEdit}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       title="Click to edit"
     >
       {renderContent()}
diff --git a/apps/web/components/feature/devlog/devlog-list.tsx b/apps/web/components/feature/devlog/devlog-list.tsx
