Componentização React

Componentização react: Aprenda a utilizar hooks


Como desenvolvedor de software ou aspirante, todos sabemos como pode ser complexo o desenvolvimento de um web app, e como em pouco tempo, essa aplicação pode ir do simples ao complexo em questão de horas, dependendo do projeto.

Isso fica ainda mais claro quando estamos desenvolvendo um projeto que naturalmente possui um protótipo bastante complexo, com muitas entradas e saídas, requisições para uma ou mais API’s, cadastros de usuários ou produtos, gráficos, relatórios… Enfim, quanto mais features, maior a complexidade do front e também o desafio.

E acredite, essa complexidade de elementos pode ser um grande problema na hora de gerenciar vários componentes em sua aplicação: Das folhas de estilo, até ao estado que armazena os objetos das requisições, sem um gerenciamento eficaz, você poderá fazer um tratamento capilar em pouco tempo.

E para resolver essa dor, devido às limitações do JavaScript, ao longo dos anos muitas bibliotecas foram criadas, como por exemplo o famigerado JQuery, que te ajudava a ser mais produtivo do que o JavaScript “Vanilla”, apesar de perder desempenho.

Bom, se você vive nesta terra e não em marte, vai saber que o JQuery foi muito popular entre 2006 e 2018, mas acabou caindo em desuso por novos sistemas, pois as novas implementações do ECMA Script já traziam muitas facilidades ao JavaScript, tornando o JQuery não tão relevante para a comunidade, a não ser que você trabalhe com um sistema mais antigo, claro.Bom, essa não foi a única biblioteca que nasceu para facilitar o uso incorporado do JavaScript com o DOM (Document Object Model), existem várias outras, mas por hoje, selecionei uma que é a minha preferida e também de vários dev’s pelo mundo, pelas suas facilidades e seus principais recursos. E muito provavelmente você sairá desse post sabendo seu ponto de partida no React!

React: O poderoso produtivo que você precisa conhecer

Você, com toda certeza, também já ouviu falar de React, ainda mais quando a comunidade é gigantesca e cria, a cada dia, novos recursos para este universo, que já é tão exclusivo por si só, que faz valer cada segundo investido, consumindo sua documentação.

O React é uma biblioteca JavaScript, criada pelo próprio Facebook, para facilitar bastante a criação de SPA’s (Single Page Applications), o compartilhamento de estado e também trabalhar com paradigma funcional, já que ele deu suporte a hook’s (algo parecido com add-on’s) desde sua versão 16.8. Com elas, você simplesmente troca classes por funções, facilitando bastante a escrita e clareza de código.

Mas, para você entender um pouco sobre o que são React hooks, vou trazer dois exemplos de hooks bastante usados no mercado, e que, basicamente com eles você pode fazer muita coisa em sua aplicação, desde salvar e enviar dados para uma API externa, como também criar efeitos colaterais, tanto no que é renderizado no cliente (navegador), quando o que é enviado para o servidor da aplicação.

Bora entender melhor como esses dois hooks funcionam?

Uma introdução: React Hooks

Hooks são uma nova adição ao React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe.”

É com essa definição do React que percebemos onde está o seu poder: Os hooks!

Mantenha o estado da sua aplicação com o hook useState.

Antes de você começar a entender a eficácia de qualquer hook, vamos entender sua facilidade. Vamos começar com uma comparação entre uma implementação em classe, e a mesma implementação utilizando o hook useState :

Acessando o estado através de uma classe construtora:

E agora, usando o hook useState:

Você consegue perceber a diferença entre as duas implementações? Dá pra dizer logo de cara que essa função do React faz a mesma coisa que a classe, utilizando menos linhas de código, e claro, tem um aspecto muito mais elegante.

Seu uso também é muito mais simples: Note que ao declarar o estado “count”, você utilizou um segundo parâmetro, chamado “setState”. Este cara tem o poder de atualizar o estado da aplicação, sem a necessidade de modificar o estado dela.

Caso você queira entender mais profundamente seu uso, implementação e boas práticas, sugiro fortemente que você acesse a documentação do React.

Você quer entender de forma prática como o useState realmente funciona? Olha o exemplo, pequeno villager:

Note que estes lindos produtos da nossa querida Nintendo, estão sendo renderizados no navegador, mas de onde estes produtos estão vindo?

Todos estes produtos estão cadastrados no servidor, e estão sendo renderizados pois um desenvolvedor fez uma requisição http que solicita estes dados, como por exemplo o link das imagens, o título do produto, o preço e a descrição.

Ok, estes produtos foram recuperados para o navegador, e agora, onde eu os guardo? Se você respondeu useState, está certíssimo!

Com o useState, o desenvolvedor tem agora acesso a um estado, permitindo que estes dados também persistam no navegador, como estavam no banco de dados, por exemplo.

Após a requisição, você poderia por exemplo, enviar o objeto obtido da requisição diretamente para o estado, dessa forma, “renderizando” os dados na tela.

Efeitos colaterais com componentes funcionais com useEffect.

Assim como persistência de dados com useState, Um conceito bastante importante é o de ciclo de vida de um componente. Ele define o que e quando seu componente será renderizado, montando e desmontando componentes. Algo muito próximo a este conceito utilizando os hooks é o useEffect.

Como o próprio nome diz, esta função permite criar efeitos colaterais em seus componentes, alterando qualquer tipo de informação que seja ou não renderizada no navegador.

Com o useEffect, você pode definir o momento certo em que uma nova requisição poderá acontecer do cliente pro servidor, por exemplo. Você também pode renderizar uma nova informação na página do usuário, quando o estado da sua aplicação for alterado, como por exemplo, estar ou não logado e com o token da sessão ativo.

Um exemplo simples de implementação do useEffect, é poder alterar o título de uma página (ou documento html, como você preferir) através de mudanças sucessivas de estado:

Note que, ao clicar no botão, o useEffect altera em tempo real o título da página, mostrando a quantidade de vezes em que ele foi clicado.

Este é apenas um exemplo, e suas limitações de uso praticamente são os que você ainda não conseguir imaginar.

O useEffect é um dos hooks mais poderosos do React, pois ele permite sua aplicação ser dinâmica e melhorar bastante a experiência do usuário de forma simples. Porém, use com parcimônia.

Conclusão

Hoje, eu abordei algumas maneiras de utilizar 2, dos principais hooks de React, e algumas dicas de suas implementações, que você pode encontrar com maior profundidade na própria documentação.

Se você está aprendendo agora sobre programação, te aconselho a pegar leve no React, e estudar melhor as bases do JavaScript primeiro. 

Neste caso, te aconselho fortemente a entrar em contato com a Kenzie Academy Brasil, pois ela vai te ajudar a sair do ponto zero e alcançar o teu sonho de se tornar um dev em apenas 12 meses. Essa é uma realidade que eu vivencio, e pode acontecer com você também. Basta dar o primeiro passo.

Por hoje é isso, nos vemos na próxima!

Leia também:

+1

Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *