Skip to content

Use key prop to reset LLM role manager form state instead of useEffect sync #1018

@MODSetter

Description

@MODSetter

Description

In llm-role-manager.tsx, when server data changes (via preferences), a useEffect copies the new values into local state. This adds an extra re-render per data change. The recommended approach is to use a key prop so React remounts the form with correct initial state, and derive hasChanges during render.

Vercel React Best Practices Rule: rerender-derived-state-no-effect (5.1)

File to change

  • surfsense_web/components/settings/llm-role-manager.tsx
  • The parent component that renders LlmRoleManager

What to do

  1. In the parent that renders LlmRoleManager, pass key={searchSpaceId} so the component remounts when the search space changes:
<LlmRoleManager key={searchSpaceId} searchSpaceId={searchSpaceId} />
  1. Remove the sync useEffect (lines 124-132):
// DELETE:
useEffect(() => {
  const newAssignments = {
    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 ?? "",
  };
  setAssignments(newAssignments);
  setHasChanges(false);
}, [preferences]);
  1. Convert hasChanges to a derived value (remove the state variable):
// Remove: const [hasChanges, setHasChanges] = useState(false);
// Add:
const hasChanges =
  assignments.agent_llm_id !== (preferences.agent_llm_id ?? "") ||
  assignments.document_summary_llm_id !== (preferences.document_summary_llm_id ?? "") ||
  assignments.image_generation_config_id !== (preferences.image_generation_config_id ?? "");
  1. Remove setHasChanges(false) from the save handler and any other places it appears.

Acceptance criteria

  • No sync useEffect mirrors preferences into local state
  • hasChanges is derived during render, not stored in state
  • LLM role assignments still display correctly and save properly
  • Switching search spaces resets the form to the new space's preferences

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions