Dicas básicas para o uso de Hooks

Escrito por Adriana Martins, Young Gun Tech na Pipefy.

Os Hooks foram introduzidos no React 16.8 (2018). Desde então, eles vêm sendo uma excelente forma de melhorar a legibilidade e reutilização de lógica entre os componentes, o que melhora também a experiência de desenvolvimento. Porém, a sua utilização também pode trazer alguns potenciais problemas. Por serem projetados para gerenciar o estado e atualizações da interface do usuário, eles acabam adicionando uma camada de complexidade à aplicação, principalmente quando são personalizados – o que por vezes dificulta o entendimento de um desenvolvedor menos familiarizado com seu uso.

Em um componente, o estado da aplicação é gerenciado por meio de propriedades próprias. Dessa forma, ao atualizar o estado de um componente, esse é novamente renderizado e exibe as mudanças ao usuário. Assim, o gerenciamento do estado fica mais explícito, como no exemplo abaixo:

Essa maneira mais explícita traz vantagens para aplicações menores ou mais simples. É aí então que o uso dos hooks se torna mais interessante, já que esse gerenciamento de estado feito por meio de hooks é mais implícito. Isso pode tornar o código mais claro e menos complexo, especialmente em aplicações maiores ou mais complexas. Veja abaixo como esse mesmo código seria escrito utilizando o hook useState:

Mas já que explícito é melhor que implícito, vamos esclarecer melhor como um hook faz esse gerenciamento. Em um componente funcional, nós podemos armazenar o estado em variáveis locais dentro da função do componente, e então essas variáveis podem ser gerenciadas por meio de um hook, que essencialmente funciona como uma função do React. Algumas dessas funções especiais já são amplamente utilizadas, como é o caso do ‘userState’ ou ‘useEffect’ , mas também é possível criar personalizações. Abaixo temos um exemplo de hook personalizado por mim e como aplicá-lo dentro desse código:

Aqui o hook personalizado “useClickCounter” é criado para gerenciar o estado da quantidade de cliques no botão. Esse hook retorna uma sequência com dois valores: o “clickCount”, que armazena o número de cliques, e a função “incrementClickCount”, que atualiza o valor do “clickCount” a cada clique. Então, no componente MoveButton, utilizamos o hook personalizado “useClickCounter” e chamamos a função “incrementClickCount” dentro do handleClick para incrementar o valor de “clickCount” a cada clique. O valor de “clickCount” é exibido dentro do próprio botão.

Com um melhor entendimento do que é um hook e como utilizar dentro de um código, é possível perceber que eles trazem muitas vantagens, principalmente nos quesitos de redução de código e melhoria da performance, mas é importante levar em consideração algumas boas práticas:

Dê bons nomes aos seus Hooks 

Ao criar Hooks personalizados, é importante nomeá-los adequadamente. Isso ajuda a diminuir conflitos e torna seu código mais legível. Para Hooks personalizados, é uma boa prática começar o nome com a palavra “use”, seguida pelo nome do Hook. Por exemplo, “useClickCounter”.

Use com moderação

Embora seja tentador criar vários Hooks para compartilhar lógica entre os seus componentes, não exagere. Use apenas o necessário e que realmente façam sentido para seu caso de uso. Do contrário, você pode acabar com uma grande quantidade de Hooks, tornando seu código difícil de entender.

Evite criar Hooks muito específicos

Ao criar seus Hooks personalizados, evite criar Hooks muito específicos para um caso de uso particular. Em vez disso, crie Hooks genéricos que possam ser usados em vários componentes. Isso torna seus Hooks mais reutilizáveis e fáceis de manter.

Use os Hooks nativos do React sempre que possível

Embora seja tentador criar Hooks personalizados para cada caso de uso, é importante usar os Hooks nativos do React sempre que possível. Isso inclui Hooks como useState, useEffect e useContext. Esses Hooks são bem testados e foram projetados para serem usados em vários componentes, tornando seu código mais fácil de entender e manter.

Separe a lógica de negócios da lógica do Hook

É importante separar a lógica de negócios da lógica do Hook. Por exemplo, se você criar um Hook para lidar com autenticação, mantenha a lógica de autenticação em um arquivo separado e importe-o para o Hook. Isso torna mais fácil testar e manter a lógica do Hook separada da lógica de negócios.

Para finalizar, espero que as informações aqui apresentadas tenham sido úteis para você entender um pouco mais sobre Hooks. É importante ressaltar que este é um artigo básico, e que existem muitos outros recursos disponíveis para aprofundar seu conhecimento sobre o tema. Se tiver qualquer dúvida ou sugestão, não hesite em deixar um comentário!