useEffect Audit

Search the codebase for all useEffect usage and evaluate each instance against the 5 rules from Factory's "Why we banned React's useEffect" framework. For each useEffect found, classify it and recommend whether it should stay or be refactored.

Steps

1. Find all useEffect calls — Search src/ for every useEffect( occurrence. List each one with its file path and line number.

2. Evaluate each useEffect against these 5 rules, in order:

   Rule 1: Derived state, not synced state If the effect sets state derived from other state/props (pattern: useEffect(() => setX(f(y)), [y])), it should be replaced with inline computation or useMemo.

   Rule 2: Use data-fetching libraries If the effect does fetch() then setState(), it should use a data-fetching library (React Query, SWR, or Next.js server components/actions). Race conditions and missing cancellation are red flags.

   Rule 3: Event handlers, not effects If the effect acts as a relay for a user action (set flag -> effect fires -> reset flag), the logic belongs in the event handler directly.

   Rule 4: useMountEffect for one-time external sync If the effect legitimately syncs with an external system on mount (DOM APIs, third-party widgets, browser APIs, subscriptions) with an empty [] dep array, it is acceptable but should be wrapped in a named useMountEffect hook to make intent explicit.

   Rule 5: Reset with key, not dependency choreography If the effect's only job is to reset/reload when an ID or prop changes, the parent should use key={id} to force a remount instead.

3. Produce a report for each useEffect with this format:

   ## [file:line] — VERDICT
   
   **Current code:** (brief description of what the effect does)
   **Rule violated:** Rule N — (rule name), or "None — legitimate use"
   **Recommendation:** Keep as-is / Refactor to X
   **Suggested fix:** (short code sketch if refactoring is recommended)
   

   Verdicts are one of:

   • REMOVE — useEffect is unnecessary, replace with derived state or event handler
   • REFACTOR — useEffect can be replaced with a better pattern (key reset, fetch library, etc.)
   • KEEP (wrap) — legitimate mount/external-sync use, but should be wrapped in useMountEffect
   • KEEP — already correct and necessary

4. Summary — At the end, give a count: how many to REMOVE, REFACTOR, KEEP (wrap), and KEEP. Highlight the highest-impact refactors first.

Important

• Only evaluate useEffect calls — skip useLayoutEffect, custom hooks that internally use useEffect (unless the custom hook itself is in this repo), and test files.
• When suggesting refactors, respect the existing stack (Next.js App Router, React 19, server components where applicable).
• Do NOT make any code changes. This command is audit-only. Present findings and let the user decide what to act on.