Já podemos utilizar Hooks no React, oReact Hooks? Antes de respondermos essa pergunta, você já sabe o que é Hooks? Se não, vamos juntos tentar entender melhor sobre este novo recurso.
Resumidamente, Hooks é uma nova proposta que irá nos permitir utilizar estado, ciclo de vida, entre outras funcionalidades, sem a necessidade de escrevermos componentes com classe. A proposta já foi aceita e está disponível na versão 16.8 do React.
Então vamos entender melhor como os Hooks irão mudar e impactar o desenvolvimento de UI com React Hooks.
Motivação
Os Hooks resolvem uma grande variedade de problemas encontrados durante o desenvolvimento de componentes. Por exemplo:
- Reutilização de lógica de estado entre components;
- Wrapper Hell (HOC, Render props — React DevTools);
- Componentes complexos e difíceis de se compreender;
- Componentes contendo grandes responsabilidades;
- Confusão ao utilizar classes (this, classes).
Antes de continuarmos, um pouquinho sobre Typescript
Ele vem dominando e tendo uma grande imersão em aplicações que anteriormente só utilizavam JavaScript. Que tal já escrevermos nossos exemplos em Typescript (TS), para nos acostumarmos com os tipos?
O Typescript fornece um sistema de tipos para JavaScript, dando a oportunidade de checarmos nossos tipos em tempo de desenvolvimento. Type check tem provado aprimorar a qualidade, compreensibilidade e manutenção do código.
Cenário anterior
Imagine que você tenha um componente sem estado e ciclo de vida e, a partir deste momento, por alguma necessidade, precise desses recursos em seu componente?
No componente acima, apenas mostramos a propriedade counter recebida via props. Agora vamos necessitar de um estado local que será responsável por manter o valor do count. Surgindo essa necessidade, também aparece a obrigatoriedade de reescrevermos com classe.
Componente Counter com Classe:
Trocando Class por Hooks
Agora temos a mesma lógica do componente anterior com Hooks. É notável a redução de escrita e a facilidade para compreender melhor como o componente irá se comportar.
Extinção das classes?
Não é necessário reescrever todo o seu código para que ele seja escrito utilizando Hooks, mas já relataram que pretendem, no futuro, retirar o suporte às classes do package react, repassando essa responsabilidade para uma lib distinta.
Então se você gosta de escrever seus componentes com classe, não se preocupe, irão manter nessa lib o Component e PureComponent.
Estado
useState
Como já vimos no exemplo anterior, essa é a forma como iremos definir nosso estado em nossos componentes.
useReducer
É uma alternativa para mantermos nosso estado quando o mesmo é mais complexo. Se você conhece a sintaxe do redux, a mesma é utilizada no useReducer.
Algo que deve ser mencionado é que aqui não temos a propagação do estado por toda a aplicação como o redux proporciona. Caso queira algo similar, terá que utilizar useContext.
Ciclos de vida
useEffect
Este será responsável por nos ajudar a lidar com side effects em nossa aplicação, ele irá substituir os ciclos de vida que tínhamos anteriormente.
O primeiro parâmetro do useEffect é uma função de callback que irá ser disparada quando o componente for montado.
Também irei listar um pequeno exemplo de como utilizaríamos com classe e agora com Hooks:
ComponentDidMount
Inicialmente, pode parecer bem estranho, para termos o efeito de componentDidMount com Hooks é necessário passar um array vazio como segundo parâmetro para o Hook useEffect.
ComponentDidUpdate
Similar ao que temos no componentDidMount com hooks, precisamos passar os valores de estado e props dentro de um array no segundo parâmetro da função useEffectpara mantermos o efeito do ciclo componentDidUpdate.
Observação: neste caso, não é necessário nem informar o tipo do estado name, pois o Typescript já infere para nós que é uma string quando iniciamos o estado com um texto vazio.
ComponentWillUnmount
ComponentWillUnmount com hooks
Você deve ter notado que para todos os três métodos que utilizávamos anteriormente, o useEffect engloba os mesmos efeitos em um único Hook. O retorno e os parâmetros do useEffect são o que diferenciam seu comportamento.
Custom Hooks
Você também é livre para criar seus próprios Hooks podendo compartilhar lógica entre componentes.
Este é o pulo do gato, use sempre que necessário!
Hooks cobrem todos os ciclos anteriores?
Não, existem alguns fluxos que os Hooks ainda não suportam como:
- getDerivedStateFromError;
- componentDidCatch;
- getSnapshotBeforeUpdate.
Estes devem ser implementados em um futuro próximo e, se por acaso precisar, deverá ainda utilizar classes nestes casos.
Regras e resumo sobre Reack Hooks
Algumas regras devem ser cumpridas na utilização de Hooks:
- Não utilize Hooks em loops;
- Não utilize Hooks em condições;
- Declare seus Hooks no topo do componente.
Para manter este padrão e evitar problemas, existe um plug-in do eslint que pode te auxiliar e evitar o uso incorreto dos Hooks:
Em outras palavras: Se você gosta de escrever seus componentes com classe, use React Hooks.
Se algo escrito aqui precisa ser corrigido ou se deseja complementar o conteúdo, não deixe de comentar. Vamos compartilhar conhecimento e enriquecer a nossa comunidade.
Ah, e se quiser ficar por dentro de tudo o que a gente produz sobre tecnologia e carreira assine a nossa newsletter. Nelas, destacamos artigos, vídeos, lives, episódios de podcast e muito mais! E o melhor disso? Você recebe tudo no seu e-mail.
