fix: unconditional hook calls in ChatProfiles and FeedbackButtons

[EyalAmitay]

Problem

ChatProfiles and FeedbackButtons both violate React's Rules of Hooks by calling useEffect / useCallback hooks after a conditional return null. When the guarding condition changes between renders, the hook count differs and React throws invariant 300 ("Rendered fewer hooks than expected") or 310 ("Rendered more hooks than expected").

ChatProfiles (lines 44–66)

The copilot header renders <ChatProfiles /> whenever config?.chatProfiles?.length >= 1. Inside ChatProfiles, the early return fires when length <= 1 — a different threshold — leaving 2 useEffect hooks unreachable:

// 7 hooks called unconditionally …
const [openDialog, setOpenDialog] = useState(false);

if (!config?.chatProfiles?.length || config.chatProfiles.length <= 1) {
  return null; // ← hooks 8 and 9 below are skipped on this render path
}

useEffect(() => { … }, [chatProfile, config.chatProfiles, setChatProfile]); // hook 8
useEffect(() => { … }, [chatProfile, config.chatProfiles, setChatProfile]); // hook 9

How it fires in practice: useConfig clears config to undefined and refetches whenever chatProfile changes. When SWR has a cached response for the new URL it serves it synchronously, so React batches setConfig(undefined) + setConfig(newData) into a single render — config transitions directly from {chatProfiles:[A,B]} to {chatProfiles:[A]} without passing through undefined. The parent header sees hasChatProfiles = !!(1) = true and keeps ChatProfiles mounted; the child hits length <= 1 and takes the early return after 7 hooks; React sees 9 hooks on render N and 7 on render N+1 → invariant 300. When config does pass through undefined, the parent unmounts ChatProfiles first and the fiber is destroyed before React can detect the mismatch — no error fires. The production flakiness reflects which code path the config update takes, not timing.

FeedbackButtons (lines 50–96)

Same pattern: 8 useState/useRecoilValue hooks before if (!showFeedbackButtons) return null, followed by 2 useCallback hooks. showFeedbackButtons derives from !!config?.dataPersistence, so the same config-reload cycle can flip it.

Evidence

~836 occurrences over 30 days across multiple production deployments, single error fingerprint v11.04854025396C892A97427E50E80C58F4, all from */copilot/index.js:

Error: Minified React error #300
  at $be   ← React throwInvariantViolation (renderWithHooks)
  at Zbe   ← renderWithHooks
  at kFe   ← updateFunctionComponent
  at SFe   ← beginWork
Caught by: ErrorBoundary.componentDidCatch
ComponentStack: in GSr (ChatProfiles)

Fix

Hoist all hook calls above the conditional early return; gate the side-effect logic on the same boolean as the guard.

Testing

Two regression tests added in frontend/tests/:

• ChatProfiles.spec.tsx — mounts the component with 2 profiles, then re-renders with config = undefined (mirroring useConfig's setConfig(undefined) on profile change), then re-renders with config restored. Asserts no "Rendered fewer/more hooks" error is logged. Fails on the unfixed code, passes after the fix.

• FeedbackButtons.spec.tsx — same pattern, toggling showFeedbackButtons between true and false on the same fiber.

• Before fix: both ChatProfiles.spec.tsx and FeedbackButtons.spec.tsx fail with "Rendered fewer hooks than expected. This may be caused by an accidental early return statement." - exactly React's invariant 300
  message

• After fix: all 34 tests pass

pnpm --filter @chainlit/app type-check and pnpm lint both pass.

[cubic-dev-ai]

No issues found across 2 files

[jschwarz89]

Looks good to me, solves a real crash for us!

[cubic-dev-ai]

1 issue found across 4 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/tests/FeedbackButtons.spec.tsx">

<violation number="1" location="frontend/tests/FeedbackButtons.spec.tsx:86">
P2: The hook-order matcher misses React’s standard "Rendered fewer hooks than expected" error text, so this regression test can pass even when the hook-order bug is present.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}