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

useEffect não rodar no render inicial do React capa

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.

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários