Como executar função apenas uma vez com useEffect em React

Neste artigo você vai aprender a como executar função apenas uma vez com useEffect em React, utilizando um recurso super simples

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

O useEffect possui um array de dependências que pode executar uma função a cada vez que uma das dependências é alterada

Se não colocarmos um array, teremos uma execução sendo realizada a cada renderização do componente, o que pode ser um problema

E para gerar a execução apenas uma única vez basta apenas colocar um array vazio

Isso faz com que após a leitura do código seja executada, o useEffect que possui o array vazio é executado uma única vez

Veja um exemplo prático:

  useEffect(() => {
    
    console.log("Isso será executado uma vez!");

  }, []);

Pronto! É apenas isso que precisamos para resolver o nosso problema

Conclusão

No artigo de hoje você aprendeu a como executar função apenas uma vez com useEffect e também um pouco mais sobre a função

Basta colocar um array de dependências vazio, isso condiciona o useEffect a uma execução

Colocando dependências neste array, você terá a execução sempre que o item em questão for atualizado de alguma forma

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos