{"componentChunkName":"component---src-templates-blog-post-js","path":"/o-ciclo-de-vida-dos-componentes-do-react-com-os-hooks/","result":{"data":{"markdownRemark":{"id":"17a798c8-9135-5578-8062-71963d21c762","fields":{"slug":"/o-ciclo-de-vida-dos-componentes-do-react-com-os-hooks/"},"frontmatter":{"title":"O ciclo de vida dos componentes do React com os Hooks","description":"Vamos ver como o useEffect trabalha com o ciclo de vida","date":"30 de Mai de 2020","thumbnail":"/assets/img/react.png"},"html":"<p>Com a chegada dos Hooks adicionado no React 16.8, bastante coisa mudou na forma de escrever nossos componentes em React. Por exemplo, podemos criar um componente funcional com estado, sendo que antes apenas componentes de Classe poderiam ter estado. Para saber mais sobre os hooks acesse a <a href=\"https://pt-br.reactjs.org/docs/hooks-intro.html\">documentação  oficial</a>, o melhor é que agora está traduzida em PT-BR !!!</p>\n<h1>Ciclo de vida</h1>\n<p>Todo componente React tem um ciclo de vida, ou seja ele é:</p>\n<ul>\n<li><strong>Inicializado</strong></li>\n<li><strong>Montado</strong></li>\n<li><strong>Atualizado</strong></li>\n<li><strong>Desmontado</strong> </li>\n</ul>\n<p>Podemos então interceptar cada um desses momentos para realizar determinadas ações em nosso componente e alterar o meio como ele é renderizado ou captar informações desse ciclo.</p>\n<p>Podemos ver melhor essa representação na imagem abaixo: </p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/cbf63934fa6130a03fba07752e5dc80a/e8950/react-lifecycle.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 46.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsSAAALEgHS3X78AAABMUlEQVQoz31RXW/DIAzs//9je16nqVXapkkWGkJKvgsGDMxptq4P207Iss53WLY3MUYDC3zwBK01IoYY6FFpZShSvpJUJcY5R8yGSCll0zTEGmOEEFRbpCEAZaDrutZLAvEOpRRp5nm+m9FCvYN6j1a3l/FybJqi84jHyb5U02tnQcOU7Nu3rWalj0EUskxqnkuPfuns4OZAoXei5+klrSRDjyOv+S6RaaaGiR1Yuc3anFM3C07fwIClGTbxGzQzH7pU8LKTzmPP2HV/7t4Pep4rIQrGunFYF/HAszmI3mZ85q1BH2QznBLGcnED9dGzo8ha1dEifjc/FyiX6nqW52pkM5ii1odyug42xr/NYYlxvQpv9S5vT9Vg7NflfAj/dPaPj0nk0INB4/BJHu6aH3wCvBUH6w2zt08AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"Ciclo de vida React\"\n        title=\"Ciclo de vida React\"\n        data-src=\"/static/cbf63934fa6130a03fba07752e5dc80a/d9199/react-lifecycle.png\"\n        data-srcset=\"/static/cbf63934fa6130a03fba07752e5dc80a/8ff5a/react-lifecycle.png 240w,\n/static/cbf63934fa6130a03fba07752e5dc80a/e85cb/react-lifecycle.png 480w,\n/static/cbf63934fa6130a03fba07752e5dc80a/d9199/react-lifecycle.png 960w,\n/static/cbf63934fa6130a03fba07752e5dc80a/07a9c/react-lifecycle.png 1440w,\n/static/cbf63934fa6130a03fba07752e5dc80a/29114/react-lifecycle.png 1920w,\n/static/cbf63934fa6130a03fba07752e5dc80a/e8950/react-lifecycle.png 2000w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h1>Montagem</h1>\n<p>Esse método é executado após nosso componente ter sido criado e inserido no DOM. É muito utilizado quando precisamos pegar um dado em nossa API, por exemplo.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\">  <span class=\"token comment\">//sem hooks</span>\n  <span class=\"token function\">componentDidMount</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n   <span class=\"token comment\">//...</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token comment\">//com hooks</span>\n  <span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">//..</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<h1>Atualização</h1>\n<p>Esse método é executado após uma atualização em componente. Utilizamos muito, para verificar se determinada informação foi alterada e ter alguma reação para isso.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token comment\">//sem hooks</span>\n<span class=\"token function\">componentDidUpdate</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">prevProps</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>props<span class=\"token punctuation\">.</span>name <span class=\"token operator\">!==</span> prevProps<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Name has changed!\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">//com hooks</span>\n<span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Name has changed!\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>name<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span></code></pre></div>\n<h1>Desmontagem</h1>\n<p>Esse método é executado quando o componente é desmontado da arvore do DOM. Utilizamos ele para por exemplo remover um eventListener.</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token comment\">//sem hooks</span>\n<span class=\"token function\">componentWillUnmount</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Component unmounted!\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">//com hooks</span>\n<span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Component unmounted!\"</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<h1>Métodos Descontinuados</h1>\n<p>Devido mal entendimento e uso, alguns métodos do ciclo de vida do React foram descontinuados, ou seja, quando o React for atualizado para a versão 17 esses métodos já não vão mais existir.</p>\n<iframe src=\"https://giphy.com/embed/57ZvMMkuBIVMlU88Yh\" width=\"480\" height=\"432\" frameBorder=\"0\" class=\"giphy-embed\" style=\"pointer-events: none;\"></iframe>\n<p>Os métodos descontinuados são:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token function\">componentWillMount</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">//Executado antes do componente ser montado na tela</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">componentWillReceiveProps</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">//Executado antes do componente receber novas propriedades</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">componentWillUpdate</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">//Executado antes do componente ser atualizado</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h1>Conclusão</h1>\n<p>Com a chegada dos hooks vimos que muita coisa mudou e ficou muito mais simples na escrita. E esse artigo foi apenas para ajudar a conseguir entender \"substituir\" os ciclos de vida de componentes de classes e usar o <code class=\"language-text\">useEffect</code>  para reproduzi-los em componentes funcionais. Para saber mais detalhes sobre o hook <code class=\"language-text\">useEffect</code><strong><em>,</em></strong> recomendo acessar ao <a href=\"https://overreacted.io/a-complete-guide-to-useeffect/\">Um guia completo para useEffect</a> de <a href=\"https://twitter.com/dan_abramov\">Dan Abramov</a>.</p>\n<p>Deixe no comentário suas dúvidas, críticas construtivas e possíveis temas para os próximos artigos!</p>\n<p>Até a próxima !!!!</p>\n<iframe src=\"https://giphy.com/embed/3o7ZeDUjzgk3P4VeVy\" width=\"480\" height=\"480\" frameBorder=\"0\" class=\"giphy-embed\" style=\"pointer-events: none;\"></iframe>","timeToRead":2}},"pageContext":{"slug":"/o-ciclo-de-vida-dos-componentes-do-react-com-os-hooks/","previousPage":{"frontmatter":{"title":"Oi, Eu sou o Leandro"},"fields":{"slug":"/oi-eu-sou-o-leandro/"}},"nextPage":{"fields":{"slug":"/map-filter-e-reduce/"},"frontmatter":{"title":"Map, Filter e Reduce"}}}}}