# Como Corrigir o Uso Excessivo de useEffect por IAs

> 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.

**Type:** Failure  
**Tools:** Cursor, Claude Code, Codex, Windsurf  
**Stack:** Next.js, TypeScript  
**Updated:** 2026-06-08

---

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.

## O sintoma

`useEffect` é usado para calcular valores derivados ou sincronizar estado que poderia ser um cálculo simples.

```tsx
"use client";
import { useState, useEffect } from "react";

// WRONG — useEffect to compute derived state
export function CartSummary({ items }: { items: CartItem[] }) {
  const [total, setTotal] = useState(0);

  useEffect(() => {
    setTotal(items.reduce((sum, item) => sum + item.price * item.qty, 0));
  }, [items]);

  return <p>Total: ${total}</p>;
  // Renders twice: once with total=0, once after the effect runs
}
```

Um segundo padrão: buscar dados em `useEffect` quando um Server Component poderia fazê-lo sem qualquer custo de bundle do cliente.

```tsx
"use client";
useEffect(() => {
  fetch("/api/products").then((r) => r.json()).then(setProducts);
}, []);
// Waterfall: page loads -> JS executes -> fetch starts -> render
```

## Por que isso acontece

`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.

## Como identificar

- `useEffect` define estado que é diretamente computável a partir de props ou outro estado.
- `useEffect(() => { fetch(...).then(setState) }, [])` no topo de um componente que não está dentro de uma subárvore de Server Component.
- `useEffect` sem limpeza onde a dependência é uma função (risco de closure obsoleta).
- `useEffect` usado puramente para logging ou análise na montagem.

## Como corrigir

Use a ferramenta certa para o trabalho:

```tsx
// CORRECT — derived state: just compute it
export function CartSummary({ items }: { items: CartItem[] }) {
  const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);
  return <p>Total: ${total.toFixed(2)}</p>;
}

// CORRECT — expensive derivation: useMemo
import { useMemo } from "react";

export function FilteredList({ items, query }: { items: Item[]; query: string }) {
  const filtered = useMemo(
    () => items.filter((i) => i.name.toLowerCase().includes(query.toLowerCase())),
    [items, query]
  );
  return <ul>{filtered.map((i) => <li key={i.id}>{i.name}</li>)}</ul>;
}
```

```tsx
// CORRECT — data fetching: async Server Component (no useEffect needed)
// app/products/page.tsx
export default async function ProductsPage() {
  const products = await fetch("https://api.example.com/products").then((r) =>
    r.json()
  );
  return <ProductList products={products} />;
}
```

```txt
[ ] Derived values from props/state are plain calculations, not useEffect + setState
[ ] Expensive derivations use useMemo, not useEffect
[ ] Data fetching on mount moves to async Server Components or React Query/SWR
[ ] Event-driven side-effects (form submit, button click) are in event handlers
[ ] useEffect is reserved for: external system sync, subscriptions, cleanup
[ ] Every useEffect that sets state has a loading/error state and cleanup
```

## Prompt de Correção

```txt title="Fix Prompt"
This component uses useEffect to compute derived state or fetch initial data.
Refactor it: replace derived-state effects with direct calculations or useMemo,
move initial data fetching to an async Server Component parent or to a
data-fetching library (SWR/React Query) with proper loading/error handling, and
keep useEffect only for genuine external-system synchronization that requires
cleanup. Explain each useEffect you keep and why it cannot be replaced.
```

## Teste

```bash
# Count useEffect calls — a high number is a smell worth reviewing
grep -rn "useEffect" --include="*.tsx" --include="*.ts" src/ app/ \
  | grep -v "node_modules" \
  | wc -l

# Flag useEffect+setState patterns for manual review
grep -A5 "useEffect" app/**/*.tsx 2>/dev/null | grep "setState\|set[A-Z]" \
  && echo "REVIEW: possible derived-state antipattern" || echo "OK"
```