useEffect está executando duas vezes no React

Se o seu useEffect está executando duas vezes no React, principalmente quando você está em desenvolvimento, na maioria dos casos isso não é um bug.

Esse comportamento acontece, geralmente, por causa do Strict Mode do React 18, que executa alguns efeitos propositalmente duas vezes em ambiente de desenvolvimento para ajudar a detectar problemas.

Neste artigo, você vai entender por que isso acontece, quando você deve se preocupar e o que realmente precisa (ou não) ser corrigido.

A situação clássica: “por que isso está rodando duas vezes?”

Você escreve um código simples, algo como:

useEffect(() => {
    console.log("Executou");
}, []);

Abre o navegador, olha o console…
E lá está:

Executou
Executou

A primeira reação costuma ser:

“Tem algo errado no meu código.”

A segunda:

“Será que estou fazendo alguma coisa errada no React?”

Calma. Na maioria das vezes, você não está.

Por que o useEffect executa duas vezes no React?

A partir do React 18, quando o projeto está envolvido por <React.StrictMode>, o React passa a executar alguns efeitos duas vezes em ambiente de desenvolvimento.

Isso é intencional.

O objetivo do Strict Mode é ajudar você a identificar:

efeitos colaterais inesperados
código que não é idempotente
problemas que poderiam aparecer no futuro

Esse comportamento não acontece em produção.

Ou seja:

✅ desenvolvimento: pode executar duas vezes
✅ produção: executa uma vez (comportamento normal)

Exemplo prático do comportamento

Veja este componente:

import { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("Effect executado");
  }, []);

  return <div>Exemplo</div>;
}

Se o seu app estiver assim:

<React.StrictMode>
  <Example />
</React.StrictMode>

O React vai:

Montar o componente
Executar o efeito
Desmontar
Montar novamente
Executar o efeito outra vez

Tudo isso apenas em desenvolvimento.

Isso é bug?

👉 Veja também “Em produção, problemas assim costumam se manifestar como erros mais graves no backend.”

Em ambiente de desenvolvimento

❌ Não é bug

Esse comportamento é esperado e documentado.
O React faz isso para te alertar sobre possíveis efeitos colaterais perigosos.

Na maioria dos casos, você pode simplesmente ignorar.

Em produção

⚠️ Atenção

Se o useEffect estiver executando duas vezes em produção, aí sim existe um problema real.

Isso normalmente indica:

dependências mal definidas
lógica que depende de estados mutáveis
efeitos colaterais mal controlados

O que você NÃO deve fazer para “corrigir”

Esse é um ponto importante.

❌ Remover o Strict Mode sem entender

Muita gente resolve assim:

// remove o StrictMode
<Example />

Isso “resolve” o sintoma, mas não resolve o problema.
Você só está desligando um alerta importante do React.

❌ Criar flags globais ou gambiarras

Exemplo comum:

let executed = false;

useEffect(() => {
  if (executed) return;
  executed = true;
}, []);

Isso cria mais problemas do que soluções:

comportamento imprevisível
bugs difíceis de rastrear
código frágil

Quando o useEffect executando duas vezes vira um problema real?

👉 Veja também “Em aplicações com SSR, esse tipo de efeito pode gerar problemas de hidratação no Next.js.”

Existem situações em que você deve agir.

🔴 Chamadas duplicadas de API em produção

Se sua API está sendo chamada duas vezes em produção, algo está errado.

Normalmente a causa é:

dependência faltando no array
estado que muda e dispara novamente o efeito

🔴 Dependências mal definidas

Exemplo clássico:

useEffect(() => {
  fetchData();
}, [user]);

Se user muda frequentemente, o efeito vai disparar novamente.

🔴 Efeitos colaterais não idempotentes

Se o efeito:

grava dados
altera estado global
dispara eventos externos

Ele precisa ser seguro para múltiplas execuções.

Boas práticas para evitar efeitos colaterais

👉 Veja também “Estados inconsistentes também afetam recursos visuais, como o dark mode em frameworks modernos.”

Aqui entram práticas que ajudam independente do Strict Mode.

✅ Torne seus efeitos idempotentes

Um efeito deve poder rodar mais de uma vez sem quebrar nada.

✅ Separe responsabilidades

Evite useEffect gigantes.

Em vez disso:

um efeito para buscar dados
outro para reagir a mudanças específicas

✅ Revise bem o array de dependências

Sempre pergunte:

“Esse efeito precisa rodar quando isso mudar?”

✅ Use hooks customizados quando fizer sentido

Isso melhora:

legibilidade
reutilização
controle de efeitos

Uma dica prática para devs cansados

Perder horas tentando “consertar” algo que não é um bug é uma das maiores fontes de frustração no dia a dia.

Entender que:

o React faz isso de propósito
o comportamento muda entre dev e produção
nem tudo precisa ser corrigido

te poupa tempo, energia e desgaste mental.

Conclusão

Se o seu useEffect está executando duas vezes:

✅ em desenvolvimento → é normal
❌ em produção → investigue
❌ não remova o Strict Mode sem entender
✅ foque em efeitos bem escritos e previsíveis

Você não está maluco, seu código provavelmente está certo, e agora você sabe quando agir e quando seguir em frente.

Twittar

0 Compart.

useEffect está executando duas vezes no React