Na nova versão do React lançada esse mês, 16.8.0, foi lançada uma funcionalidade que ajudará na criação dos seus React Components, os Hooks. Que vem pra resolver alguns problemas que tínhamos no React e facilitar um pouco a escrita de componentes.

O que resolve ?

Primeiramente é difícil reutilizar lógica com estado em vários componentes, hoje é possível utilizar o Render Props ou High Order Components, mas isso faz com que tenha que mudar a estrutura do seu componente. Além disso, entender um componente grande pode ser difícil, um dos motivos é que temos que colocar nos Lifecycle Methods itens que tem que executar naquele momento do ciclo, porém não tem muita relação consigo, então segregar eles pelo propósito e não pelo momento que irá ser executado seria melhor.

Como resolve ?

Primeiro ele é Opt-in, ou seja, você pode começar a utilizá-lo gradualmente na sua aplicação e apenas em pontos necessários. Isso facilita também porque você pode começar a escrever seus componentes como função, e se for necessário que ele tenha estado, você não precisa mudar o jeito que está escrito e fazer uma a classe mais, pode apenas criar um Hook. Com isso consegue utilizar funcionalidade dos componentes como classe em componentes funcionais, não apenas o estado mas também acessar o Lifecycle, entre outros.

Como é na prática ?

Esse código é um exemplo para utilizar o Hook useState, nele é passado apenas um valor inicial e ele retorna uma referência a propriedade que quer e uma função que é utilizada para alterar essa mesma propriedade. O código fica bem mais sucinto e fácil de entender.

 

 

 

Nesse outro exemplo podemos ver como os Hooks ajudam quando queremos programar uma ação que dependa do Lifecycle. No exemplo pense que temos uma chamada de API que está abstraída como uma Streamno ChatAPI e queremos que quando o componente “morra” ele cancele a requisição. Para isso utilizamos o useEffect, ele recebe dois parâmetros sendo o primeiro uma função que faz a sua lógica que tem um Side Effect no caso a chamada a API e retorna uma função que será executada no momento que o componente “morrer”. O segundo parâmetro não está no exemplo mas é simples, é um Array que contém as referências das propriedades que o efeito depende para ser executado, por exemplo, caso eu queira fazer essa chamada de API toda vez que a propriedade XPTO tenha seu valor alterado, eu passaria um Array com essa referência e então ele só executaria nesse caso, um outro exemplo se eu passar esse Array vazio, então ele será executado apenas uma vez, o que seria equivalente ao componentDidMount.

Conclusão

Além dos dois exemplos que mostrei você pode também criar hookspersonalizados e utilizar outros que o React já oferece. Os hooks acabaram de entrar em produção na versão 16.8, então acho legal usar eles gradualmente em nossas aplicações. Na minha opinião os Hooks são um grande facilitador ao escrever os componentes, sendo opt-in e muito versáteis podemos fazer vários hooks customizáveis e abstrair lógica com state para reaproveitarmos de uma maneira mais simples, além de não termos que reescrever a estrutura das nossas aplicações para usá-lo, é só usar com a necessidade.

Valeu por ler até aqui! Até a próxima!

Referência

https://reactjs.org/docs/hooks-reference.html