Criando Hooks personalizados no React
Desde a release 16.8 do React, os já famosos “Hooks” vem ganhando bastante espaço no desenvolvimento de componentes dentro da biblioteca.
Atualmente, o React já possui inúmeros hooks nativos, com diferentes funções e utilidades no contexto do desenvolvimento diário, dentre alguns mais utilizados, temos:
- useState => Gerenciamento local de estados de um componente
- useEffect => Propagação de algum efeito colateral a partir de uma lista de “observáveis”
- useRef => Retornar algum valor de referência através da propriedade “current”
Mas, mesmo com esse respaldo de implementações nativas, muitas vezes temos alguma necessidade específica no contexto de nossa aplicação, sendo alguma tarefa ou rotina que é repetida muitas vezes.
Para evitar que tudo isso se torne um grande boilerplate de código, podemos com muita facilidade implementar o nosso próprio.
Mas, antes de começarmos, precisamos entender o que é um hook. Em termos simples, não passa de uma função comum no Javascript que realiza alguma tarefa e tem em seu nome o prefixo “use”.
Vamos usar como exemplo um hook que realiza uma tarefa bem simples: Controlar um contador.
- Primeiro, vamos criar uma pasta em nosso projeto já previamente gerado sob o template do React. O nome comum para ela é “hooks”, mas como qualquer outra convenção, não necessariamente precisa ser seguida:
- Agora, basta implementarmos nossa função que funcionará como um hook. Como pode ver, é bem simples, pois não passa de uma função que estamos exportando com algum propósito específico:
- No exemplo acima, estamos exportando o estado local que criamos, junto com funções internas que vão incrementar ou decrementar esse valor, gerenciando esse contador. Optei por exportar como um array, mas se preferível, podemos facilmente exportar como um object.
- Em seguida, basta desfrutarmos de nosso novo hook onde ele for necessário:
- Eis o resultado final:
O resultado é bastante prosaico, mas o objetivo é mostrar que a implementação de um hook personalizado é simples e só depende da criatividade de quem vai escrevê-lo.
Em termos de negócio, é claro que a implementação acima terá pouco uso, mas imagine outras situações em que é possível abstrair alguma tarefa repetitiva ou complexa; são nesses momentos que esse conceito é útil.
Alguns outros exemplos de situações onde podemos implementar hooks personalizados:
- Chamadas HTTP com Fetch API ou XHR
- Gerenciamento de estados de erro da aplicação
Hoje, ficamos por aqui. Não se esqueça de aplaudir o artigo caso tenha gostado. Até a próxima!!
Link para o projeto no GitHub:
