Merge pull request #1038 from JoeMakuta/fix/narrow-effect-use-lazy-state-init-add-memo

fix : narrow effect, use lazy state init and add memo

surfsense_web/components/assistant-ui/thread-list.tsx

@@ -9,7 +9,7 @@ import {
 	TrashIcon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -215,7 +215,7 @@ interface ThreadListItemComponentProps {
 	onDelete: () => void;
 }
 
-function ThreadListItemComponent({
+const ThreadListItemComponent = memo(function ThreadListItemComponent({
 	thread,
 	isActive,
 	isArchived,
@@ -272,7 +272,7 @@ function ThreadListItemComponent({
 			</DropdownMenu>
 		</button>
 	);
-}
+});
 
 /**
  * Format a date as relative time (e.g., "2 hours ago", "Yesterday")

surfsense_web/components/settings/general-settings-manager.tsx

@@ -47,7 +47,7 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 			setName(searchSpace.name || "");
 			setDescription(searchSpace.description || "");
 		}
-	}, [searchSpace]);
+	}, [searchSpace?.name, searchSpace?.description]);
 
 	// Derive hasChanges during render
 	const hasChanges = !!searchSpace && ((searchSpace.name || "") !== name || (searchSpace.description || "") !== description);

surfsense_web/components/settings/llm-role-manager.tsx

@@ -112,11 +112,11 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
 
-	const [assignments, setAssignments] = useState({
+	const [assignments, setAssignments] = useState(() => ({
 		agent_llm_id: preferences.agent_llm_id ?? "",
 		document_summary_llm_id: preferences.document_summary_llm_id ?? "",
 		image_generation_config_id: preferences.image_generation_config_id ?? "",
-	});
+	}));
 
 	const [hasChanges, setHasChanges] = useState(false);
 	const [isSaving, setIsSaving] = useState(false);
@@ -129,7 +129,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		};
 		setAssignments(newAssignments);
 		setHasChanges(false);
-	}, [preferences]);
+	}, [preferences?.agent_llm_id, preferences?.document_summary_llm_id, preferences?.image_generation_config_id]);
 
 	const handleRoleAssignment = (prefKey: string, configId: string) => {
 		const newAssignments = {

surfsense_web/components/settings/prompt-config-manager.tsx

@@ -38,7 +38,7 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 		if (searchSpace) {
 			setCustomInstructions(searchSpace.qna_custom_instructions || "");
 		}
-	}, [searchSpace]);
+	}, [searchSpace?.qna_custom_instructions]);
 
 	// Derive hasChanges during render
 	const hasChanges = !!searchSpace && (searchSpace.qna_custom_instructions || "") !== customInstructions;

surfsense_web/components/tool-ui/confluence/update-confluence-page.tsx

@@ -149,17 +149,15 @@ function ApprovalCard({
 	const context = interruptData.context;
 	const page = context?.page;
 
-	const initialEditState = {
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const [editedArgs, setEditedArgs] = useState(() => ({
 		title: actionArgs.new_title
 			? String(actionArgs.new_title)
 			: (page?.page_title ?? args.new_title ?? ""),
 		content: actionArgs.new_content
 			? String(actionArgs.new_content)
 			: (page?.body ?? args.new_content ?? ""),
-	};
+	}));
-
-	const [isPanelOpen, setIsPanelOpen] = useState(false);
-	const [editedArgs, setEditedArgs] = useState(initialEditState);
 	const [hasPanelEdits, setHasPanelEdits] = useState(false);
 	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
 

surfsense_web/components/tool-ui/jira/update-jira-issue.tsx

@@ -173,7 +173,8 @@ function ApprovalCard({
 	const issue = context?.issue;
 	const priorities = context?.priorities ?? [];
 
-	const initialEditState = {
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const [editedArgs, setEditedArgs] = useState(() => ({
 		summary: actionArgs.new_summary
 			? String(actionArgs.new_summary)
 			: (issue?.issue_title ?? args.new_summary ?? ""),
@@ -183,10 +184,7 @@ function ApprovalCard({
 		priority: actionArgs.new_priority
 			? String(actionArgs.new_priority)
 			: (issue?.priority ?? args.new_priority ?? "__none__"),
-	};
+	}));
-
-	const [isPanelOpen, setIsPanelOpen] = useState(false);
-	const [editedArgs, setEditedArgs] = useState(initialEditState);
 	const [hasPanelEdits, setHasPanelEdits] = useState(false);
 	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
 

surfsense_web/components/tool-ui/linear/update-linear-issue.tsx

@@ -182,7 +182,8 @@ function ApprovalCard({
 	const priorities = context?.priorities ?? [];
 	const issue = context?.issue;
 
-	const initialEditState = {
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const [editedArgs, setEditedArgs] = useState(() => ({
 		title: actionArgs.new_title
 			? String(actionArgs.new_title)
 			: (issue?.title ?? args.new_title ?? ""),
@@ -202,10 +203,7 @@ function ApprovalCard({
 		labelIds: Array.isArray(actionArgs.new_label_ids)
 			? (actionArgs.new_label_ids as string[])
 			: (issue?.current_labels?.map((l) => l.id) ?? []),
-	};
+	}));
-
-	const [isPanelOpen, setIsPanelOpen] = useState(false);
-	const [editedArgs, setEditedArgs] = useState(initialEditState);
 	const [hasPanelEdits, setHasPanelEdits] = useState(false);
 	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);