{
  "id": "ai-overuses-useeffect",
  "type": "failures",
  "category": "failures",
  "locale": "pt",
  "url": "/pt/failures/ai-overuses-useeffect",
  "title": "Como Corrigir o Uso Excessivo de useEffect por IAs",
  "description": "Agentes de IA recorrem ao useEffect para lidar com estado derivado, transformações de eventos e busca de dados que deveriam usar useMemo, manipuladores de eventos ou Server Components.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript"
  ],
  "tags": [
    "react",
    "nextjs",
    "hydration"
  ],
  "difficulty": null,
  "updated": "2026-06-08",
  "markdown": "O agente envolve lógica em `useEffect` que deveria ser estado derivado, um manipulador de eventos ou uma busca em Server Component — causando renderizações extras, closures obsoletas e condições de corrida.\n\n## O sintoma\n\n`useEffect` é usado para calcular valores derivados ou sincronizar estado que poderia ser um cálculo simples.\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\nUm segundo padrão: buscar dados em `useEffect` quando um Server Component poderia fazê-lo sem qualquer custo de bundle do cliente.\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## Por que isso acontece\n\n`useEffect` era a principal válvula de escape para efeitos colaterais no React 16/17. Modelos treinados em código anterior ao React 18 e ao App Router aprenderam a recorrer a ele por padrão. O modelo mental \"preciso que algo aconteça após a renderização\" mapeia para `useEffect` mesmo quando a correção real é mais simples.\n\n## Como identificar\n\n- `useEffect` define estado que é diretamente computável a partir de props ou outro estado.\n- `useEffect(() => { fetch(...).then(setState) }, [])` no topo de um componente que não está dentro de uma subárvore de Server Component.\n- `useEffect` sem limpeza onde a dependência é uma função (risco de closure obsoleta).\n- `useEffect` usado puramente para logging ou análise na montagem.\n\n## Como corrigir\n\nUse a ferramenta certa para o trabalho:\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## Prompt de Correção\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## Teste\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```"
}