Skip to content

Use key={connector.id} to reset connector config forms instead of useEffect sync #1010

@MODSetter

Description

@MODSetter

Description

15+ connector config components follow the same anti-pattern: they initialize local form state from connector props, then add a useEffect that re-syncs state when the connector changes. Per React docs, the recommended approach is to use a key prop so React remounts the component with fresh initial state.

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

What to do

Step 1: Add key in the parent

In the parent that renders connector configs (likely connector-edit-view.tsx or the view that switches between connector types), add key={connector.id} to the config component:

<LinkupApiConfig key={connector.id} connector={connector} onConfigChange={...} />

Step 2: Remove the sync useEffect from each config component

For example in linkup-api-config.tsx (lines 22-27), delete:

useEffect(() => {
  const key = (connector.config?.LINKUP_API_KEY as string) || "";
  setApiKey(key);
  setName(connector.name || "");
}, [connector.config, connector.name]);

Step 3: Apply the same removal to all connector config files:

  • surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linkup-api-config.tsx
  • tavily-api-config.tsx
  • baidu-search-api-config.tsx
  • luma-config.tsx
  • bookstack-config.tsx
  • webcrawler-config.tsx
  • clickup-config.tsx
  • confluence-config.tsx
  • jira-config.tsx
  • obsidian-config.tsx
  • searxng-config.tsx
  • github-config.tsx
  • google-drive-config.tsx
  • composio-drive-config.tsx
  • circleback-config.tsx
  • elasticsearch-config.tsx

Step 4: Clean up

Remove the useEffect import if no other effects remain in the file.

Acceptance criteria

  • Parent renders config components with key={connector.id}
  • No connector config component contains a "sync from props" useEffect
  • Switching between connectors still correctly resets all form fields
  • Editing a connector's config and then switching to another shows the correct values

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions