{
  "id": "ai-overuses-useeffect",
  "type": "failures",
  "category": "failures",
  "locale": "de",
  "url": "/de/failures/ai-overuses-useeffect",
  "title": "So beheben Sie die übermäßige Nutzung von useEffect durch KI",
  "description": "KI-Agenten greifen auf useEffect zurück, um abgeleitete Zustände, Ereignistransformationen und Datenabrufe zu behandeln, die stattdessen useMemo, Ereignishandler oder Server Components verwenden sollten.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "react",
    "nextjs",
    "hydration"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "Der Agent kapselt Logik in `useEffect`, die eigentlich abgeleiteter Zustand, ein Ereignishandler oder ein Server Component-Fetch sein sollte — was zu zusätzlichen Renderings, veralteten Closures und Race Conditions führt.\n\n## Das Symptom\n\n`useEffect` wird verwendet, um abgeleitete Werte zu berechnen oder Zustand zu synchronisieren, der eine einfache Berechnung sein könnte.\n\n```tsx\n\"use client\";\nimport { useState, useEffect } from \"react\";\n\n// WRONG — useEffect to compute derived state\nexport function CartSummary({ items }: { items: CartItem[] }) {\n  const [total, setTotal] = useState(0);\n\n  useEffect(() => {\n    setTotal(items.reduce((sum, item) => sum + item.price * item.qty, 0));\n  }, [items]);\n\n  return <p>Total: ${total}</p>;\n  // Renders twice: once with total=0, once after the effect runs\n}\n```\n\nEin zweites Muster: Datenabruf in `useEffect`, obwohl eine Server Component dies ohne jegliche Client-Bundle-Kosten erledigen könnte.\n\n```tsx\n\"use client\";\nuseEffect(() => {\n  fetch(\"/api/products\").then((r) => r.json()).then(setProducts);\n}, []);\n// Waterfall: page loads -> JS executes -> fetch starts -> render\n```\n\n## Warum es passiert\n\n`useEffect` war der primäre Side-Effect-Ausweg in React 16/17. Modelle, die mit Code vor React 18 und vor dem App Router trainiert wurden, haben gelernt, standardmäßig darauf zurückzugreifen. Das mentale Modell „Ich brauche etwas, das nach dem Rendern passiert“ wird auf `useEffect` abgebildet, selbst wenn die eigentliche Lösung einfacher ist.\n\n## Wie man es erkennt\n\n- `useEffect` setzt einen Zustand, der direkt aus Props oder anderem Zustand berechnet werden kann.\n- `useEffect(() => { fetch(...).then(setState) }, [])` oben in einer Komponente, die sich nicht in einem Server Component-Unterbaum befindet.\n- `useEffect` ohne Bereinigung, bei dem die Abhängigkeit eine Funktion ist (Risiko veralteter Closures).\n- `useEffect`, das nur zum Loggen oder für Analysen beim Mounten verwendet wird.\n\n## Wie man es behebt\n\nVerwenden Sie das richtige Werkzeug für die Aufgabe:\n\n```tsx\n// CORRECT — derived state: just compute it\nexport function CartSummary({ items }: { items: CartItem[] }) {\n  const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);\n  return <p>Total: ${total.toFixed(2)}</p>;\n}\n\n// CORRECT — expensive derivation: useMemo\nimport { useMemo } from \"react\";\n\nexport function FilteredList({ items, query }: { items: Item[]; query: string }) {\n  const filtered = useMemo(\n    () => items.filter((i) => i.name.toLowerCase().includes(query.toLowerCase())),\n    [items, query]\n  );\n  return <ul>{filtered.map((i) => <li key={i.id}>{i.name}</li>)}</ul>;\n}\n```\n\n```tsx\n// CORRECT — data fetching: async Server Component (no useEffect needed)\n// app/products/page.tsx\nexport default async function ProductsPage() {\n  const products = await fetch(\"https://api.example.com/products\").then((r) =>\n    r.json()\n  );\n  return <ProductList products={products} />;\n}\n```\n\n```txt\n[ ] Derived values from props/state are plain calculations, not useEffect + setState\n[ ] Expensive derivations use useMemo, not useEffect\n[ ] Data fetching on mount moves to async Server Components or React Query/SWR\n[ ] Event-driven side-effects (form submit, button click) are in event handlers\n[ ] useEffect is reserved for: external system sync, subscriptions, cleanup\n[ ] Every useEffect that sets state has a loading/error state and cleanup\n```\n\n## Fix Prompt\n\n```txt title=\"Fix Prompt\"\nThis component uses useEffect to compute derived state or fetch initial data.\nRefactor it: replace derived-state effects with direct calculations or useMemo,\nmove initial data fetching to an async Server Component parent or to a\ndata-fetching library (SWR/React Query) with proper loading/error handling, and\nkeep useEffect only for genuine external-system synchronization that requires\ncleanup. Explain each useEffect you keep and why it cannot be replaced.\n```\n\n## Test\n\n```bash\n# Count useEffect calls — a high number is a smell worth reviewing\ngrep -rn \"useEffect\" --include=\"*.tsx\" --include=\"*.ts\" src/ app/ \\\n  | grep -v \"node_modules\" \\\n  | wc -l\n\n# Flag useEffect+setState patterns for manual review\ngrep -A5 \"useEffect\" app/**/*.tsx 2>/dev/null | grep \"setState\\|set[A-Z]\" \\\n  && echo \"REVIEW: possible derived-state antipattern\" || echo \"OK\"\n```"
}