Ganchos de reação

Os hooks do React apareceram na versão 16.7.0 alpha e são funções que permitem usar toda a funcionalidade das classes React em componentes funcionais. Podemos, graças aos ganchos, desenvolver um aplicativo React feito apenas de componentes funcionais. No entanto, é interessante notar que os componentes funcionais usando hooks são totalmente compatíveis com as classes React.
Se você quiser alternar para ganchos em seu aplicativo, poderá fazê-lo à medida que avança sem interromper o restante de seu aplicativo. Esses ganchos permitem, entre outras coisas, substituir o estado e os métodos de ciclo de vida de uma classe React. Como não são classes, a palavra-chave 'this' não é mais relevante em seu código.
Existem duas regras para saber ao usar ganchos:

  1. Hooks são chamados no nível superior de um componente. Ou seja, você não pode chamá-los de uma função ou subfunção.
  2. Hooks são chamados apenas em componentes funcionais. Eles não vão trabalhar em uma sala de aula.

Para ajudá-lo e orientá-lo em seus desenvolvimentos, você pode usar o ESlint linter graças à seguinte regra: eslint-plugin-react-hooks. 
 

#1 UsarEstado

useState é o primeiro gancho que vamos descobrir. Permite substituir o famoso estado de uma classe React. Ele é definido com seu setter em uma linha:

o que fizemos aqui ? 
A função useState retorna uma matriz. Esta função toma como parâmetro o valor inicial desejado.
O primeiro elemento do array (nome) é uma variável que dá acesso ao valor do estado (aqui UX-Republic).
O segundo elemento (setName) é uma função que atualiza o estado do componente para ter os novos valores no DOM.
O exemplo a seguir mostra a transformação de uma classe React em um componente funcional usando o gancho useState: 

Vamos ver o código :
Não precisa mais do construtor, a definição do nome da variável e seu setter no useState o substitui. Também não encontramos 'this' no código para acessar os dados do componente.
Finalmente, para modificar o valor de 'name' basta chamar o setName definido no useState, aqui é necessário muito menos código do que com as classes React.
UseState é provavelmente o gancho mais simples oferecido pelo React. 

#2 UseEfeito

UseEfeito é o segundo gancho que abordamos neste artigo.Ele permite que você substitua os métodos de ciclo de vida de uma classe React.
Dentro de uma classe, os métodos do ciclo de vida são acionados (como o nome sugere) nos estágios do ciclo de vida do componente. O gancho useEfeito é acionado principalmente por dados enviados para este componente. 
A classe React exige que usemos seus métodos.
No entanto, às vezes, diferentes lógicas de negócios de um componente serão encontradas no mesmo método, como componentWillReceiveProps. Isso dificulta a compreensão dos métodos.
UseEffect fornece a capacidade de separar a lógica de negócios e torna um componente mais fácil de ler. Como ele faz isso? Você pode criar quantos métodos useEffect desejar em um componente. Voltaremos a isso depois de alguns exemplos.

#3 uso básicoEfeito

Em um primeiro exemplo veremos como usar useEffect em um componente simples que modifica o título da página quando um botão é clicado. Veja como seria uma classe React que faz isso.

torna-se

Vemos que usar useEffect simplifica o componente e substitui os dois métodos de ciclo de vida. Este método é chamado quando o componente é iniciado. Além disso, sempre que o componente for atualizado, o método useEffect será chamado. Não estamos mais interessados ​​no ciclo de vida do componente aqui. É apenas informado que a cada atualização, deve passar no método useEffect.

#4 useEffect com efeito de limpeza

Agora vamos descobrir o efeito de limpeza. É uma funcionalidade do useEffect que permite realizar uma ação quando o componente desmontar. Para fazer isso, basta adicionar um retorno de uma função que você deseja executar quandodesmontar no useEffect.
Aqui está um exemplo :

Vemos nessas linhas de código que quando o componente é inicializado, subscrevemos o status de um amigo via ChatAPI para saber se ele está online ou não. Retornamos este resultado usando o método identificadorStatusChange e nós renderizamos no render. Para evitar um vazamento de memória, quandodesmontar do componente, nós desinscrever ao status do nosso amigo via ChatAPI. 
O efeito de limpeza pode nos ajudar aqui a simplificar este código com useEffect :

Aqui movemos a função identificadorStatusChange no useEffect porque não é usado fora de seu escopo. Subscrevemos o estatuto como durante o componenteDidMount. Finalmente adicionamos no retorno uma função limpeza em que nós desinscrever do estado do nosso amigo. Mais uma vez ganhamos no lugar e toda a lógica é agrupada no mesmo lugar.

#5 Faça bom uso do useEffect

Aqui estão algumas dicas para usar o useEffect de React Hooks :

  • é melhor parause multiple useEffect para separar a lógica e tornar o código mais legível. É interessante notar que os useEffects são lançados na ordem em que são escritos. 
  • o desempenho pode ser otimizado passando efeitos. useEffect é iniciado sempre que o componente é atualizado.

Às vezes você só vai querer passar no useEffect se determinados valores no seu componente mudarem. Em vez de usar loops if na função useEffect para testar a atualização de certas variáveis, você pode passar como segundo argumento para useEffect um array com as variáveis ​​a serem observadas. Assim que uma dessas variáveis ​​mudar, a função useEffect será chamada.
Aqui está um exemplo :

Aqui temos um laço if que não queremos transpor para os ganchos.

Esse array que é passado como parâmetro do useEffect contém os dados que ele escuta para iniciar seu código. Se esses dados forem alterados, ele executa seu código, caso contrário, não faz nada. Você pode vê-lo como um método willReceiveProps dedicado a certos adereços. No exemplo acima, o título do documento é atualizado quando contar altera o valor.
Para sua informação, você pode passar um array vazio para useEffect, neste caso, o código será executado somente quando o componente for criado e não voltará a ele durante as atualizações deste componente.
 

Para ir mais longe

Você pode criar seus próprios ganchos, se desejar. Nada poderia ser mais simples, basta definir uma função cujo nome comece com 'use' e que esta função use hooks React. Já existem muitos ganchos personalizados no github.
Se ao usar useState, descobrirmos que o método de inicialização da variável leva muito tempo, podemos fazer a inicialização lenta facilmente. Ou seja, inicialize sua variável de forma assíncrona. 
 
Lembre-se, useState recebe o valor padrão de uma variável como parâmetro. Podemos atrasar a inicialização da variável definida no useState até o momento em que realmente precisamos dela passando uma função como parâmetro do useState.
Aqui está um exemplo de implementação :

Aqui, a inicialização de 'value' será feita de forma assíncrona e não afetará a velocidade de exibição do restante da página.
 

Conclusão

Com hooks você pode se livrar das classes React, da palavra-chave this e de todas as linhas necessárias para criar um componente (o construtor, a ligação de funções, etc.). Você pode isolar as diferentes lógicas envolvidas no mesmo componente e melhorar sua legibilidade. 
Com ganchos personalizados, você pode dividir um componente em mais funções do que com classes. 
Também é mais fácil testar nosso componente porque a lógica a ser testada é localizada e mais fácil de entender (porque não é intercalada com outra lógica).
Além disso, com esse detalhamento, você pode testar facilmente cada parte sem medo de impacto nas outras funções.
Pessoalmente, acho mais lógico pensar no seu componente de acordo com o que ele recebe como adereços do que de acordo com um ciclo de vida. Cada componente pode ser otimizado evitando passar por certos ganchos. 
No geral, precisamos de menos linhas de código para obter o mesmo resultado, mantendo o código altamente legível.
 
Biblio : 
https://reactjs.org/docs/hooks-intro.html
https://putaindecode.io/fr/articles/js/react/react-hooks/
https://medium.com/@dan_abramov/making-sense-of-react-h ooks-fdbde8803889
https://medium.freecodecamp.org/an-introduction-to-react-hooks-12843fcd2fd9
https://codeburst.io/react-hooks-in-5-minutes-1180f1aa0449
https://blog.bitsrc.io/understanding-react-hooks-usestate-6627120614ab
 
Valentin Dupetitpre, artesão JS @UX-Republic