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.

E o array de dependências?

Se liga nisso, porque é aqui que a maioria se confunde

A ref que marca a montagem inicial só faz sentido quando o seu efeito realmente roda mais de uma vez, ou seja, quando o array de dependências tem alguma coisa dentro observando um estado ou uma prop

Com o array vazio, o efeito já é executado uma vez só, na montagem, então bloquear essa execução deixa ele sem nunca fazer nada

Na prática, o padrão útil fica assim:

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

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

useEffect(() => {
if (montagemInicial.current) {
montagemInicial.current = false;
return;
}

// só roda quando 'busca' MUDA, nunca na montagem
console.log('buscando por', busca);

return <input value={busca} onChange={(e) => setBusca(e.target.value)} />;
}

Agora sim: o componente monta e nada acontece, o usuário digita e o efeito dispara 🙂

Transformando isso em um hook reutilizável:

Repetir esse if em cada componente é chato e fácil de esquecer

Dá pra tirar isso do caminho com um hook seu, na sua pasta de hooks:

import { useEffect, useRef } from 'react';

export function useEfeitoSemMontagem(callback, dependencias) {
const montagemInicial = useRef(true);

useEffect(() => {
if (montagemInicial.current) {
montagemInicial.current = false;
return;
}

return callback();
}, dependencias);
}

E no componente vira uma linha:

useEfeitoSemMontagem(() => {
console.log('a busca mudou!');

Se tu já criou algum hook próprio antes, é exatamente a mesma ideia: o hook guarda a lógica chata e o componente fica limpo

Repare que o return do callback continua sendo devolvido pro React, então tu não perde a função de limpeza no caminho

A ref zera quando o componente desmonta:

Tome cuidado com isso, é a pegadinha número um dessa técnica

A ref vive junto com o componente. Se ele sai da tela e volta (troca de rota, um condicional que esconde e mostra, uma key diferente), ele monta de novo do zero e a marcação de montagem inicial volta pro começo

Ou seja: "primeira renderização" aqui significa "primeira desta montagem", não "primeira vez na vida da aplicação"

É o erro clássico: aquele efeito que parecia rodar uma vez só volta a rodar toda vez que o usuário navega pra outra tela e retorna

Se a sua regra é "isso pode acontecer só uma vez por sessão", a ref não resolve sozinha, esse controle precisa morar fora do componente (num contexto, num estado global, no storage)

Você precisa mesmo desse efeito?

Antes de sair bloqueando o primeiro render, vale a pergunta que economiza MUITO código

Esse trecho precisa mesmo estar dentro de um useEffect?

Boa parte do que a gente joga no efeito não é efeito colateral, é outra coisa disfarçada:

Valor derivado: se dá pra calcular a partir de um estado ou de uma prop, calcula direto no corpo do componente, sem efeito e sem renderização extra

Reação a uma ação do usuário: se a coisa acontece porque clicou, digitou ou enviou o formulário, o lugar dela é o handler do evento

Resetar estado quando muda o item exibido: passar uma key diferente faz o React remontar o componente limpinho, sem efeito nenhum

Quando você tira esses três casos da frente, sobra pouca coisa que é efeito colateral de verdade: sincronizar o componente com algo de fora do React, tipo uma assinatura, um listener ou uma chamada externa

E quando sobra mesmo, aí o truque da ref lá de cima resolve bonito, beleza?