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.

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.

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

"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:

// 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>;
}

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

[ ] 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

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

# 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"