React: Três hooks indispensáveis para componentizações

React: Três hooks indispensáveis para componentizações

Se tem uma coisa que estamos velhos de saber é que o universo da programação está em constante mudança. Com o passar do tempo, muitas linguagens tornam-se ainda mais eficazes pelo processo de adaptação e o React não é uma exceção. Pensando neste conceito, criamos um artigo que aborda os hooks, ferramentas indispensáveis para a componentização com funções que vieram para revolucionar a linguagem citada.

Aqui você aprenderá sobre o useState, o useEffect e o useHistory, com exemplos de como eles podem ser implementados e para que eles servem. Todavia, vamos com calma: primeiro, é necessário garantir que você saiba o que de fato é um hook e a sua importância no dia a dia do React.

Hooks


Os hooks são a solução para o problema de certas funcionalidades (como por exemplo gerenciamento de estado e de ciclo de vida) que só eram possíveis em componentes que utilizavam classes.

Adicionados a partir do React 16.8, os hooks também proporcionaram uma implementação mais prática, mais intuitiva e menos morosa. Aos poucos, tomaram notoriedade e popularidade entre a comunidade, se tornando ferramentas essenciais para o desenvolvedor front-end.

Para uma boa prática e utilização destes métodos, existem algumas restrições que não podem ser violadas. Além da disponibilidade apenas para componentes criados com funções (não é possível utilizar hooks em classes), tudo o que você precisa saber para começar a utilizá-los é que:

  • Hooks só devem ser usados no nível superior da nossa aplicação - eles não foram feitos para serem implementados dentro de laços de condição ou de repetição, muito menos dentro de funções que possuem outras funções dentro delas, de forma que devem estar em um lugar onde sempre poderão ser acessados a cada renderização;
  • Hooks só devem ser utilizados dentro das funções React - para garantir a visibilidade dos hooks, eles só podem ser utilizados dentro de componentes React.

Ditas estas informações e explicados os principais conceitos do que é um hook, podemos então prosseguir. Vamos lá?

Hook useState

O gerenciamento de estados nas aplicações react são uma tarefa que dificilmente fugiremos em nosso dia a dia de programadores, visto que representam uma das funcionalidades mais cruciais e viscerais do desenvolvimento front-end. Para tal, a componentização por classes nos concede o state e setState, usados para criação e atualização dos estados de uma aplicação, respectivamente. Na figura 1 podemos ver um exemplo de uso de estado com classes:

Figura 1 - Utilizando estados em classes.png

Com a utilização do useState, conseguimos tornar esta implementação possível para funções e ainda mais prática se comparada com a forma que gerenciamos estados em classes.

Não é necessário criar um objeto para o state, tampouco desestruturar em todas as funções o estado que precisamos utilizar: basta importar o useState do “react” e desestruturar um array com dois elementos (uma para leitura e outro para atualização) vindos do aludido método.

Quando quisermos utilizar o que está armazenado no estado, resgatamos o primeiro elemento. De forma análoga parecida, quando for necessária a alteração do estado, passamos o que deve ser alterado como parâmetro para o segundo elemento. Veja:

Figura 2 - Utilizando estados em funções

Note que existe uma convenção e recomendação para o nome destas constantes desestruturadas do useState: elas possuem o mesmo nome, exceto o “set”no início do segundo parâmetro utilizado para atualização do estado. Trata-se de um padrão a ser seguido na construção de estados com hooks.

Caso a necessidade demande uma característica cumulativa ao nosso estado, também não há muita complicação. Primeiro, vamos ver como fazemos com classes:

Figura 3 - Utilizando estado anterior com classes

Como o useState possui apenas um estado, não precisamos especificar para todos eles qual chave do objeto prevState queremos utilizar (a não ser que especificamente nosso estado seja um objeto). De resto, o processo é semelhante ao já apresentado na figura 2. Muito fácil, não acha?

Figura 4 - Utilizando estado anterior com funções

Hook useEffect


Este hook é utilizado para trazer para a componentização de funções o conceito e aplicação de ciclo de vida de componentes, de forma que de acordo com a maneira como configuramos o useEffect, teremos funções que se comportam como componentDidMount, componenteDidUpdate ou componentWillUnmount (existentes na componentização de classes).

O useEffect não precisa ser atribuído a uma constante assim como foi feito com o  useState. Ele recebe dois argumentos como parâmetro, sendo o primeiro uma função e o segundo um parâmetro opcional. É este parâmetro que irá definir qual o comportamento do useEffect.

Se neste segundo parâmetro passamos um array vazio, o useEffect se comportará como um componentDidMount, ou seja, executará uma única vez quando o componente é montado:

Figura 5 - UseEffect com comportamento de componentDidMount

Caso nenhum parâmetro seja passado no segundo argumento, o UseEffect se comporta como um componentDidUpdate, ou seja, é executado a cada alteração/renderização do componente.

Figura 6 - UseEffect que executa a qualquer alteração e renderização


Além disso, é possível informar quais elementos, ao serem alterados, se faz necessária a execução do useEffect. Para isto, repassamos dentro do segundo parâmetro um array com estes elementos:

Figura 7 - UseEffect que executa sempre que o estado ímpar for alterado

Por fim, quando passamos uma função dentro da função existente no primeiro parâmetro e um array vazio no segundo parâmetro, o useEffect executará quando o componente for desmontado, se comportando assim como um componentWillUnmount.

Figura 8 - UseEffect com comportamento de componentWillUnmount


Hook useHistory


O history é uma propriedade de extrema importância disponibilizada com o uso do React Router e, por meio dele, temos acesso a uma gama de funcionalidades (como por exemplo redirecionar o usuário para outras páginas). Todavia, se o componente que precisa utilizar o history não for uma das páginas configuradas (ou seja, caso seja um componente dentro de algum componente de rota), obrigatoriamente precisamos repassar o history como propriedade de um componente para o outro. Isto pode ser um problema quando temos muitos componentes dentro de componentes e não é uma boa prática na utilização de funções como forma de componentização.

Para resolver este problema foi criado o useHistory. Este método pode ser utilizado sendo extraído do “react-router-dom” e atribuído a uma constante o seu retorno. Depois, é só utilizar a constante para o que for necessário:

Figura 9 - Uso do useHistory
⚠️
OBS - É importante destacar que o useHistory só pode ser utilizado até a versão 5 do React Router Dom. Para a sexta versão, substitua o useHistory pelo UseNavigate (a implementação continua sendo a mesma).

Conclusão

Viu como é fácil e prático utilizar hooks no seu projeto? Lembre-se que estes três apresentados são só o começo de um vasto universo a ser desbravado que está esperando por você. Caso queira ir mais além, o site do React  traz um pouco mais sobre os hooks. Bom proveito!

⚠️
As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.