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
Description
15+ connector config components follow the same anti-pattern: they initialize local form state from
connectorprops, then add auseEffectthat re-syncs state when the connector changes. Per React docs, the recommended approach is to use akeyprop 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
keyin the parentIn the parent that renders connector configs (likely
connector-edit-view.tsxor the view that switches between connector types), addkey={connector.id}to the config component:Step 2: Remove the sync useEffect from each config component
For example in
linkup-api-config.tsx(lines 22-27), delete:Step 3: Apply the same removal to all connector config files:
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linkup-api-config.tsxtavily-api-config.tsxbaidu-search-api-config.tsxluma-config.tsxbookstack-config.tsxwebcrawler-config.tsxclickup-config.tsxconfluence-config.tsxjira-config.tsxobsidian-config.tsxsearxng-config.tsxgithub-config.tsxgoogle-drive-config.tsxcomposio-drive-config.tsxcircleback-config.tsxelasticsearch-config.tsxStep 4: Clean up
Remove the
useEffectimport if no other effects remain in the file.Acceptance criteria
key={connector.id}