React

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

15 de junho de 2022

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

executar função apenas uma vez com useEffect capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x