Como fazer para o useEffect não rodar no render inicial do React

Neste artigo você aprenderá a como fazer para o useEffect não rodar no render inicial do React, ou seja, apenas quando precisarmos do hook

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

Quando você começa a trabalhar com React JS e seus hooks, rapidamente percebe o poder e a flexibilidade do useEffect.

Esse hook permite executar efeitos colaterais em componentes funcionais.

No entanto, uma dúvida comum entre desenvolvedores é: “Como faço para o useEffect não rodar no render inicial?”.

Embora o useEffect seja projetado para ser executado após o render inicial por padrão, existem cenários em que você pode querer evitá-lo.

Neste artigo, exploraremos como controlar a execução inicial deste hook.

O Comportamento Padrão do useEffect

Como funciona o useEffect?

O useEffect é um hook que permite realizar efeitos colaterais em componentes funcionais.

Pode-se pensar nele como uma combinação dos métodos componentDidMount, componentDidUpdate, e componentWillUnmount das classes em React.

A execução padrão

Por padrão, o useEffect é executado após cada renderização, incluindo a primeira. Isto é especialmente útil, pois garante que o efeito seja sempre atualizado com base no estado ou props mais recentes.

Evitando a Execução Inicial

Agora, se quisermos evitar que o useEffect seja executado após a primeira renderização, podemos utilizar uma referência (ref) para rastrear se é a primeira montagem do componente.

Utilizando useRef para rastrear montagens

O hook useRef do React é geralmente utilizado para acessar o DOM diretamente, mas ele também é útil para manter uma referência imutável durante toda a vida do componente.

Podemos utilizar isso a nosso favor para rastrear a montagem inicial:

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

function MeuComponente() {
  const montagemInicial = useRef(true);

  useEffect(() => {
    if (montagemInicial.current) {
      montagemInicial.current = false;
      return;
    }
    
    // Seu código aqui será ignorado na montagem inicial

  }, []);

  return <div>Meu Componente</div>;
}

Neste exemplo, o código dentro do useEffect só será executado a partir da segunda renderização em diante.

Por que controlar a execução inicial?

Há várias razões para se desejar evitar a execução do useEffect na montagem inicial:

• Performance: Em alguns casos, você pode não querer executar uma ação específica (como uma chamada de API) imediatamente após o componente ser montado.
• Lógica de Negócios: Em certos cenários, a lógica que você implementa no useEffect pode não ser relevante ou pode até causar problemas se executada na montagem inicial.
• Dependências Externas: Se o seu efeito depende de alguma variável ou configuração que só estará disponível após a montagem inicial, você pode querer adiar a execução do efeito.

Cuidados ao evitar a execução inicial

Evitar a execução inicial do useEffect é uma técnica avançada e deve ser usada com cautela:

1. Sempre teste: Sempre teste seu componente após fazer essa modificação para garantir que ele ainda funciona como esperado.
2. Documente: Deixe comentários claros em seu código para que outros desenvolvedores (ou você mesmo no futuro) saibam por que você decidiu evitar a execução inicial do useEffect.

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

Conclusão

Chegamos ao fim do artigo sobre o useEffect não rodar no render inicial do React!

O React oferece ferramentas flexíveis e poderosas para construir interfaces de usuário interativas.

O hook useEffect é uma dessas ferramentas, permitindo a execução de efeitos colaterais em componentes funcionais.

No entanto, em certos cenários, pode ser útil evitar sua execução na montagem inicial do componente.

Com os conceitos e técnicas apresentados neste artigo, você está equipado para fazer isso de uma forma otimizada e eficaz, garantindo que seus componentes React sejam tanto performáticos quanto precisos em seu comportamento.

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