📖
Hook

useEffect

Roda side effects após o React commitar mudanças no DOM.

📚 O que é

Executa APÓS o paint (assíncrono). Recebe função de setup e array de deps. Retornar função = cleanup (roda antes de re-executar ou desmontar). Deps controlam quando o effect executa.

✅ Quando usar

Sincronizar com sistemas externos: APIs, WebSockets, timers, subscriptions, manipular DOM de libs terceiras.

🚫 Quando NÃO usar

Calcular estado derivado (faça no corpo da função). Event handlers (use callbacks). Mutações que precisam ser antes do paint (use useLayoutEffect).

👍 Prós
Declarativo
Cleanup automático
Controle fino via deps
Evita race conditions com cleanup
👎 Contras
Difícil de debugar
Loop infinito fácil
Executa 2x em StrictMode
Deps instáveis são armadilha
🔗 Termos relacionados
useState
Hook

Hook básico para estado local do componente.

useLayoutEffect
Hook

Como useEffect, mas executa síncronamente ANTES do browser pintar.

useMemo
Hook

Memoiza o RESULTADO de uma computação. Recomputa apenas quando as deps mudam.

useCallback
Hook

Memoiza uma FUNÇÃO. Mantém a mesma referência entre renders enquanto deps não mudam.

useRef
Hook

Cria objeto { current } mutável que persiste entre renders sem causar re-render quando alterado.

useReducer
Hook

Alternativa ao useState para estado complexo com múltiplas transições.

useContext
Hook

Lê o valor do Context Provider mais próximo na árvore. Re-renderiza quando value muda.