React useEffect — Quando NAO Usar

Effects sao uma valvula de escape do React: servem pra sincronizar com um sistema externo (DOM nao-React, API do browser, subscription de store externa). Se nao ha sistema externo envolvido, provavelmente nao precisa de Effect — e o codigo com Effect desnecessario tende a rodar em passes extras, causar race condition ou disparar em momentos inesperados (ex: refresh de pagina).

Esta skill entra em dois momentos: (1) ao escrever um useEffect novo, como checklist antes de commitar; (2) ao revisar codigo/PR que usa useEffect, como lente pra achar o antipattern especifico e sugerir a alternativa direta.

Governanca Global

Esta skill segue GLOBAL.md, policies/execution.md, policies/handoffs.md.

Quando Usar

• escrever um useEffect novo, como checklist antes de commitar
• revisar código/PR que usa useEffect, pra achar o antipattern específico
• componente renderiza duas vezes de forma inesperada, ou tem race condition em fetch
• estado parece sincronizado manualmente quando poderia ser calculado direto

Quando Nao Usar

• a sincronização é de fato com um sistema externo (widget não-React, API de browser, subscription) — aí o Effect é a ferramenta certa
• o código já usa useSyncExternalStore, key prop, ou calcula no render corretamente — nada a revisar

Quick Reference

Situacao	NAO FACA	FACA
Estado derivado de props/state	useState + useEffect	Calcular durante o render
Calculo caro	useEffect pra cachear	useMemo
Resetar estado ao mudar prop	useEffect com setState	key prop
Resposta a evento do usuario	useEffect observando state	Direto no event handler
Notificar parent de uma mudanca	useEffect chamando onChange	Chamar no mesmo event handler
Fetch de dados	useEffect sem cleanup	useEffect com cleanup OU lib de fetch

Arvore de Decisao

Precisa responder a algo?
├── Interacao do usuario (click, submit, drag)?
│   └── EVENT HANDLER
├── Componente apareceu na tela e precisa sincronizar com algo externo?
│   └── EFFECT (widget nao-React, analytics, subscription)
├── Prop/state mudou e precisa de um valor derivado?
│   └── CALCULAR DURANTE O RENDER
│       └── Caro? use useMemo
└── Precisa resetar estado quando uma prop de identidade muda?
    └── KEY PROP no componente filho

Quando DE FATO precisa de Effect

• Sincronizar com sistema externo (widget nao-React, API de browser)
• Subscription a store externo (preferir useSyncExternalStore)
• Analytics/log que deve rodar porque o componente foi exibido
• Data fetching com cleanup adequado (ou usar mecanismo de fetch do framework)

Guia Detalhado

• anti-patterns.md — 9 antipatterns com exemplo ruim/bom lado a lado (estado derivado, filtro em Effect, reset via Effect, logica de evento em Effect, chain de Effects, notificar parent, subir dado pro parent, fetch sem cleanup, inicializacao duplicada em dev)
• alternatives.md — as alternativas em detalhe (calcular no render, useMemo, key prop, guardar ID em vez de objeto, event handler, useSyncExternalStore, lifting state up, custom hook de fetch)

Evidencia de Conclusao

• código revisado não tem useEffect cobrindo um dos 9 antipadrões de anti-patterns.md
• toda sincronização com sistema externo restante está justificada (subscription, widget não-React, analytics)

Handoff

• Frontend Engineer (skill 04) — recebe o código já revisado antes de integrar com o resto da feature
• Reviewer (skill 11) — pode citar esta skill como critério de qualidade no checklist de código

Integracao com Pipeline

• Frontend Engineer (04): consultar antes de escrever useEffect novo, ou ao revisar PR com hooks
• Reviewer (11): critério de qualidade de código React durante review final

Fontes

Conteúdo adaptado do skill público react-useeffect do repositório wealthfolio/wealthfolio (.claude/skills/react-useeffect/), que por sua vez destila a doc oficial "You Might Not Need an Effect". Sem acoplamento a nenhum projeto específico — aplicável a qualquer codebase React/Next.js do kit.