Ciclo de vida de componentes funcionais no React \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 01 Min 57 Seg Tempo restante da oferta: 14 01 57 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Ciclo de vida de componentes funcionais no React [ React ](https://www.treinaweb.com.br/blog/categoria/react) # Ciclo de vida de componentes funcionais no React Como funciona o ciclo de vida de componentes funcionais no React para manipular a inicialização, atualização e limpeza de um componente React [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/CICLO-VIDA-REACT.jpg) O Ciclo de vida de componentes funcionais no [React](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react) é um conjunto de funções de ciclo de vida que são automaticamente chamadas pelo [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web "React") quando um componente é criado, atualizado ou removido da página. Essas funções permitem que os desenvolvedores escrevam uma lógica personalizada para lidar com os eventos específicos no ciclo de vida do componente, como inicialização, renderização e limpeza. Entender e saber utilizar é importante para escrever componentes reutilizáveis, performáticos e manuteníveis. Então, neste artigo, vamos ver como funciona as três etapas do ciclo de vida que é a montagem, atualização e desmontagem. [ ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ## Montagem A montagem é um dos estágios do ciclo de vida de um componente React. Quando um componente é criado e adicionado à árvore de componentes, ele é “montado” e seus métodos de ciclo de vida são executados. Veja o exemplo abaixo: ```javascript import { useEffect } from 'react'; function MyComponent(){ // Método de montagem useEffect(() => { console.log('Componente montado e pronto para ser renderizado.'); }, []); return My component } ``` No exemplo acima, o hook `useEffect` é usado para demonstrar como podemos executar instruções durante o ciclo. O `useEffect` recebe uma função como primeiro argumento e um array de dependências como segundo argumento. A função passada será executada quando o componente for montado na tela (adicionado à árvore de componentes). Isso quer dizer que assim que o componente for montado na tela, ele executará o console.log(“…“) que está dentro da função passada ao `useEffect`. Como o array de dependências está vazio (\[\]), a função será executada apenas uma vez, durante a montagem do componente. ## Atualização Essa etapa acontece quando o estado ou as propriedades do componente é atualizado. Vejá o exemplo abaixo: ```javascript import { useEffect, useState } from 'react'; function MyComponent(){ const [count, setCount] = useState(0); // Método de montagem useEffect(() => { console.log('Componente montado e pronto para ser renderizado.'); }, []); // Método de atualização useEffect(() => { console.log('Componente atualizado.'); }, [count]); return ( Contador: {count} setCount(count + 1)}>Incrementar ); } ``` [ ![React - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-fundamentos) Observe que no ciclo de atualização existe um array de dependências que está recebendo o valor `count`. Isso vai dizer ao React para ele re-executar o bloco de instruções, do `useEffect`, sempre que o `count` tiver alguma alteração. Salientar que você consegue passar múltiplos valores que devem refletir na re-execução do bloco de instruções. ```javascript const [count, setCount] = useState(0); const [value, setValue] = useState({}); const [name, setName] = useState(''); useEffect(() => { console.log('Componente atualizado.'); }, [count, value, name]); ``` Sempre que tiver alguma alteração em um dos valores, `count`, `value` e `name` o ciclo de atualização será executado. ## Desmontagem A desmontagem é quando o componente é destruído (removido da árvore de componentes). Ele é o último ciclo de vida, então será executado somente uma vez. ```javascript import { useEffect, useState } from 'react'; function MyComponent(){ const [count, setCount] = useState(0); // Método de montagem useEffect(() => { console.log('Componente montado e pronto para ser renderizado.'); }, []); // Método de atualização useEffect(() => { console.log('Componente atualizado.'); }, [count]); // Método de desmontágem useEffect(() => { console.log('Componente montado e pronto para ser renderizado.'); return () => { console.log('Desmontando componente.'); }; }, []); return ( Contador: {count} setCount(count + 1)}>Incrementar ); } ``` Aqui temos um caso em particular, para você executar alguma instrução no ciclo de desmontagem é necessário executar o `return` dentro do `useEffect` e retornar uma função anônima. Essa função é quem será executada após a destruição do componente. O mesmo `useEffect` pode ser utilizado para executar todo o ciclo de vida. Observe o exemplo abaixo: ```javascript import { useEffect, useState } from 'react'; function MyComponent(){ const [count, setCount] = useState(0); useEffect(() => { console.log('Componente montado e pronto para ser renderizado.'); return () => { console.log('Desmontando componente.'); }; }, [count]); return ( Contador: {count} setCount(count + 1)}>Incrementar ); } ``` A partir do momento que eu tenho o `useEffect`, no componente, automaticamente estou executando o ciclo de montagem do componente. Como estou passando no array de dependências o `count`, ele, também, vai acabar executando o ciclo de atualização. E, por fim, como estou retornando uma função anônima ele, também, irá executar o ciclo de desmontágem. ## Conclusão Concluindo, o ciclo de vida de componentes funcionais no React é uma parte fundamental da biblioteca e permite que os desenvolvedores escrevam lógicas personalizadas para lidar com eventos específicos no ciclo de vida do componente, tais como inicialização, renderização e limpeza. Sei que você gostou deste artigo e tenho certeza de que a formação para [Desenvolvedor React Funcional](https://www.treinaweb.com.br/formacao/desenvolvedor-react-funcional "Desenvolvedor React Funcional") irá ajudá-lo a se tornar um desenvolvedor muito melhor. São **14h17 de video** com muito conteúdo e um total de **59 exercícios**. Veja quais são os cursos que fazem parte desta formação: - [React - Fundamentos](https://www.treinaweb.com.br/curso/react-fundamentos "React - Fundamentos") - [React - Dominando Componentes Funcionais](https://www.treinaweb.com.br/curso/react-dominando-componentes-funcionais "React - Dominando Componentes Funcionais") - [React - Despertando o Poder dos Hooks](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks "React - Despertando o Poder dos Hooks") - [React - Conhecendo o React Router](https://www.treinaweb.com.br/direto-ao-ponto/react-conhecendo-o-react-router "React - Conhecendo o React Router") - [React - Estilização com Emotion (Styled Components)](https://www.treinaweb.com.br/direto-ao-ponto/react-estilizacao-com-emotion-styled-components "React - Estilização com Emotion (Styled Components)") - [React - Boas práticas](https://www.treinaweb.com.br/curso/react-boas-praticas "React - Boas práticas") - [ #Ciclo de vida ](https://www.treinaweb.com.br/blog/tag/ciclo-de-vida) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) - [ #ciclo de vida react ](https://www.treinaweb.com.br/blog/tag/ciclo-de-vida-react) - [ #componente react ](https://www.treinaweb.com.br/blog/tag/componente-react) - [ #componente ](https://www.treinaweb.com.br/blog/tag/componente) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) 4 anos atrás ## [ Boas práticas para o React ](https://www.treinaweb.com.br/blog/boas-praticas-para-o-react) Veja neste artigo algumas das dicas e boas práticas para utilizar em uma aplicação React e tenha um código mais limpo na sua aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ O que é Spring Framework? ](https://www.treinaweb.com.br/blog/o-que-e-spring-framework) Confira neste artigo o Spring framework: um ecossistema de desenvolvimento para facilitar a criação de aplicações Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Introdução à programação assíncrona em PHP usando o ReactPHP ](https://www.treinaweb.com.br/blog/introducao-a-programacao-assincrona-em-php-usando-o-reactphp) Uma introdução à programação assíncrona com PHP e uso básico dos componentes do ReactPHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/importancia-dos-testes-de-software-na-qualidade-do-sistema-400x280.png) [ Testes e Projetos ](https://www.treinaweb.com.br/blog/categoria/testes-e-projetos) 6 anos atrás ## [ Importância dos testes de software na qualidade do sistema ](https://www.treinaweb.com.br/blog/importancia-dos-testes-de-software-na-qualidade-do-sistema) Os testes de software são uma atividade essencial para garantir a qualidade do sistema ou aplicação e não podem ser vistos como algo opcional. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/25224114/REDHAT-OPENSHIFT-400x280.png) [ DevOps ](https://www.treinaweb.com.br/blog/categoria/devops) 8 anos atrás ## [ O que é o OpenShift? ](https://www.treinaweb.com.br/blog/o-que-e-o-openshift) Conheça mais sobre o OpenShift e como ele funciona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/14122245/LAMINAS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Laminas: O futuro do Zend Framework ](https://www.treinaweb.com.br/blog/laminas-o-futuro-do-zend-framework) Você já ouviu falar no Laminas? Para quem não sabe, esse é o novo nome do já conhecido Zend Framework. Mas por que essa mudança no nome? Vamos entender o que motivou essa mudança nesse artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/04204421/capa-alm--400x280.png) [ Governança ](https://www.treinaweb.com.br/blog/categoria/governanca) 8 anos atrás ## [ Você sabe o que é ALM? ](https://www.treinaweb.com.br/blog/voce-sabe-o-que-e-alm) Veja neste artigo o que vem a ser o ALM (Application Lifecycle Management). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/15150908/img-java-artigo-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ O funcionamento do garbage collector no .NET ](https://www.treinaweb.com.br/blog/o-funcionamento-do-garbage-collector-no-net) Neste artigo, vamos compreender o funcionamento básico do garbage collector dentro da CLR em uma aplicação .NET. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/ASD-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 6 anos atrás ## [ O que é ASD - Adaptative Software Development? ](https://www.treinaweb.com.br/blog/o-que-e-asd-adaptative-software-development) Confira neste artigo o ASD - Adaptive Software Development e como esta metodologia procura facilitar o desenvolvimento de softwares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/05132043/capa-kubernetes-400x280.png) [ DevOps ](https://www.treinaweb.com.br/blog/categoria/devops) 8 anos atrás ## [ No final das contas: o que é o Kubernetes? ](https://www.treinaweb.com.br/blog/no-final-das-contas-o-que-e-o-kubernetes) Você sabe o que vem a ser o Kubernetes e como ele pode nos ajudar? Confira neste artigo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/STATELESS-VS-STATEFUL-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Flutter: Widgets Stateful e Stateless ](https://www.treinaweb.com.br/blog/flutter-widgets-stateful-e-stateless) Veja neste artigo o que são os widgets stateful e stateless e quando utilizá-los. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/17113244/IMG-MARYLENE-3-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 9 anos atrás ## [ Ciclo de vida do software: por que é importante saber? ](https://www.treinaweb.com.br/blog/ciclo-de-vida-software-por-que-e-importante-saber) Você sabe para o que realmente serve o ciclo de vida de um software? Saiba mais nesse artigo. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 01min 57s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58