AS 7 ARMADILHAS DO useEffect QUE VÃO TE FAZER CHORAR ÀS 3 DA MANHÃ
Um guia honesto, com exemplos, sobre o hook mais traiçoeiro do React.
Eu já chorei por causa de useEffect. Você provavelmente também. Aqui estão as sete armadilhas mais brutais que eu já caí — e como sair delas sem perder o cabelo.
1. O ARRAY DE DEPENDÊNCIAS VAZIO E A PROMESSA QUEBRADA
Você escreve [] porque "só quer rodar uma vez". O ESLint reclama. Você ignora. Em produção, o usuário entra no perfil errado e você pega 4 horas pra entender por quê. Lição: o array vazio não é um truque. Se você usa uma variável dentro do effect, ela DEVE estar nas dependências. Sempre.
2. CHAMAR setState NO EFFECT SEM CONDIÇÃO
Você escreve um effect que faz setCount(count + 1). Renderiza. O effect roda. Renderiza de novo. O effect roda. Bem-vindo ao loop infinito mais comum do mundo. Use functional updates ou um useReducer.
3. ESQUECER DO CLEANUP
Subscriptions, timers, event listeners. Se você abriu, fecha. Se não fechar, o usuário troca de tela e o seu setInterval continua tentando atualizar um componente desmontado. O React vai gritar. Com razão.
4. ASYNC DIRETO NO useEffect
Você escreve useEffect(async () => {...}). Não funciona como você espera. A função retornada pelo useEffect é o cleanup, não uma Promise. Crie uma função interna async e chame ela. Eu sei, é chato. Mas é assim.
5. DEPENDÊNCIAS QUE MUDAM A CADA RENDER
Você passa um objeto literal como dependência: { id }. Toda render é um objeto novo. Boom, effect roda toda render. Use useMemo, ou desestrutura no nível superior.
6. RACE CONDITIONS EM FETCHES
Usuário troca de página. Antes do primeiro fetch terminar, o segundo começa. O primeiro termina depois e sobrescreve os dados certos. Solução: AbortController, ou uma flag isCurrent no cleanup.
7. USAR EFFECT QUANDO NÃO PRECISA
Pergunta importante: você precisa MESMO de um useEffect aqui? Cálculos derivados podem ser feitos durante o render. Reagir a eventos pode ser feito em handlers. O useEffect é pra sincronizar com sistemas externos. Use com moderação.