Como resolver useEffect chamando duas vezes no React JS

Neste artigo você aprenderá a como resolver o useEffect chamando duas vezes, uma situação comum nas aplicações de React JS!

Fala programador(a), beleza? Bora aprender mais sobre React!

Se você já se deparou com o useEffect sendo chamado duas vezes em seu projeto React e não tem certeza do porquê ou de como consertá-lo, não se preocupe!

Você não está sozinho e este artigo irá guiá-lo através de algumas soluções possíveis para este problema comum.

O que é o useEffect?

Primeiro, vamos recapitular rapidamente o que é o useEffect. No React, useEffect é um gancho que é usado para lidar com efeitos colaterais em componentes funcionais.

Efeitos colaterais podem ser qualquer coisa que interage com o mundo fora do escopo do componente, como solicitações de rede, operações de temporização e atualizações manuais do DOM.

Um exemplo comum do uso do useEffect seria o seguinte:

import React, { useState, useEffect } from 'react';

function Exemplo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Você clicou ${count} vezes`;
  });

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Neste exemplo, o useEffect é usado para atualizar o título do documento sempre que o estado count é atualizado.

Por que o useEffect está sendo chamado duas vezes?

Se você notou que seu useEffect está sendo chamado duas vezes, pode haver algumas razões possíveis para isso.

1. Comportamento padrão em modo estrito

Se você estiver usando o <React.StrictMode>, useEffect será chamado duas vezes – uma para a fase de renderização e outra para a fase de commit.

Isso é feito para ajudar a encontrar efeitos colaterais indesejados que ocorreriam durante a fase de renderização.

2. Dependências de useEffect atualizadas

Se as dependências passadas para useEffect estiverem sendo atualizadas em cada renderização, isso fará com que useEffect seja chamado novamente.

Como useEffect chamando duas vezes?

Aqui estão algumas maneiras de evitar que o useEffect seja chamado duas vezes:

1. Remova <React.StrictMode>

Se você não está em um ambiente de produção e a dupla chamada de useEffect está causando problemas, você pode considerar a remoção do <React.StrictMode>.

No entanto, é importante notar que o modo estrito vem com uma série de verificações e alertas que podem ajudar a pegar erros comuns, então use esta opção com cautela.

2. Verifique suas dependências

Se useEffect está sendo chamado duas vezes devido às dependências que estão mudando a cada renderização, você pode precisar verificar o gerenciamento de estado de seu componente.

Por exemplo, se você está passando um objeto ou uma matriz como dependência, uma nova instância será criada a cada renderização, fazendo com que useEffect seja chamado novamente.

Neste caso, você pode querer considerar o uso de useMemo ou useCallback para retornar uma instância consistente.

import React, { useState, useEffect, useMemo } from 'react';

function Exemplo() {
  const [count, setCount] = useState(0);

  const valorMemoizado = useMemo(() => ({ count }), [count]);

  useEffect(() => {
    console.log('Este será chamado sempre que count mudar', valorMemoizado.count);
  }, [valorMemoizado]);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Evitando uma Chamada Inicial de useEffect

Em algumas situações, você pode querer que o useEffect seja chamado somente quando certas dependências mudam, mas não na montagem inicial do componente.

Para isso, você pode utilizar uma referência (useRef) para rastrear se é a primeira renderização.

import React, { useState, useEffect, useRef } from 'react';

function Exemplo() {
  const [count, setCount] = useState(0);
  const primeiroRender = useRef(true);

  useEffect(() => {
    if (primeiroRender.current) {
      primeiroRender.current = false;
      return;
    }
    document.title = `Você clicou ${count} vezes`;
  }, [count]);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Neste exemplo, useEffect não é executado na primeira renderização devido à condição no início do efeito.

Observações Finais sobre useEffect

Enquanto useEffect é uma ferramenta poderosa, é importante usar este gancho com cuidado para evitar comportamentos inesperados e problemas de desempenho.

Algumas dicas importantes a considerar ao usar useEffect incluem:

1. Minimize o número de dependências: cada dependência monitorada fará com que o efeito seja executado novamente. Se possível, tente minimizar o número de dependências para reduzir a quantidade de vezes que o efeito será executado.
2. Evite efeitos colaterais durante a renderização: useEffect é projetado para efeitos colaterais que não acontecem durante a renderização, como solicitações de rede e interações com o DOM. Tente manter a função de renderização pura e livre de efeitos colaterais sempre que possível.
3. Limpe seus efeitos: se seu efeito colateral é algo que precisa ser limpo (como um intervalo ou um ouvinte de evento), não se esqueça de retornar uma função de limpeza para evitar vazamentos de memória.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Este timer irá limpar-se automaticamente após o desmonte do componente.');
  }, 1000);

  return () => clearInterval(timer);
}, []);

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo que fala sobre o useEffect chamando duas vezes!

A chamada dupla de useEffect pode ser confusa no início, mas ao entender o motivo pelo qual isso ocorre e como gerenciar as dependências do useEffect, você será capaz de controlar melhor quando e quantas vezes seus efeitos colaterais são chamados.

Lembre-se, React é tudo sobre entender e controlar o fluxo de dados em seu aplicativo, e useEffect é uma parte importante disso!

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.