Explorando a lib usehooks-ts para Desenvolvimento no React

Essa lib é uma boa escolha para quem curte hooks personalizáveis, além de ser em Typescript, o que facilita na hora de desenvolver e conhecer os recursos que essa poderosa lib, traz consigo.

Vamos lá, usehooks-ts o que falar desse camarada que facilita em muitos aspectos a vida do dev. Ela é uma biblioteca que fornece uma coleção de hooks personalizados, para uso em projetos React com TypeScript. Esses hooks abrangem uma variedade de funcionalidades, desde manipulação de estado até interações com APIs externas.

Essa biblioteca é útil porque oferece uma maneira conveniente de reutilizar lógica em seus componentes React. Em vez de escrever a mesma lógica repetidamente em vários componentes, você pode simplesmente importar os hooks correspondentes da biblioteca e usá-los em seus componentes.

Alguns exemplos de hooks disponíveis nessa biblioteca incluem o useLocalStorage, que permite armazenar dados no localStorage do navegador, e o useFetch, que facilita a realização de requisições HTTP.

Basicamente elá e uma biblioteca de hooks personalizados, feito em Typescript, mas se você tiver caído de paraquedas e não saber o que são hooks personalizados, eu fiz uma matéria sobre o assunto, vou deixar o link aqui.

E caso você nem faça ideia do que são os hooks no React, um breve resumo que eu poderia dar, seria que os Hooks são uma característica introduzida no React, que permitem que você use o estado e outros recursos do React em componentes funcionais. Antes da introdução dos hooks, o React principalmente se baseava em componentes de classe para gerenciar o estado e o ciclo de vida.

Voltando a falar sobre essa lib, se você estiver trabalhando em um projeto React com TypeScript, o uso dessa biblioteca pode simplificar seu código e aumentar sua produtividade. No entanto, é importante revisar a documentação e entender como cada hook funciona antes de usá-lo em seu projeto, eu irei trazer alguns pontos positivos e também negativos de utilizar essa lib, assim como alguns métodos populares dela, juntamente como instalar em seu projeto react.

Vantagens do usehooks-ts

Produtividade: Essa lib fornece um acervo de hooks personalizados e amplamente testados na comunidade, o que pode acelerar o desenvolvimento, fornecendo implementações comuns de funcionalidades que você pode simplesmente importar e usar em seus componentes, como o useLocalStorage ou useFetch,citados anteriormente.

Reutilização de código: Hooks personalizados encapsulam lógica complexa em componentes, tornando mais fácil e eficiente a reutilização desse código em toda a aplicação.

Type Safety (Segurança de Tipos): Como o usehooks-ts é projetada com TypeScript, isso pode ajudar a melhorar a segurança de tipos em seu código, o que pode evitar muitos erros comuns.

Alto Acervo: Essa lib possui muitos hooks atualmente em sua versão, o que lhe facilita utilizar dela em vários projetos, como, por exemplo, o hook useDarkMode que é um hook onde permite adicionar um tema escuro ao seu aplicativo, muito útil na maioria das aplicações.

Desvantagens do usehooks-ts

Limitações: Bibliotecas de hooks personalizados podem não atender a todas as necessidades da sua aplicação, o que pode exigir soluções adicionais ou personalizadas, mesmo falando sobre seu alto acervo de métodos, pode ser que em sua aplicação específica algo nessa lib não atenda, e por isso não seja necessário utilizar ela no codigo.

Curva de Aprendizado: Possa ser que alguns hooks dessa lib, seja necessário dar uma estudada, mas afundo para entender como implementar, mesmo estando tudo bem documentado, vale a pena colocar esse ponto.

Tamanho do Bundle: Como toda boa dependência, isso pode aumentar o tamanho do bundle da sua aplicação, caso tenha muitas dependências instaladas em seu projeto, isso possa vir futuramente afetar o desempenho.

Como fazer o uso do usehooks-ts em seus projetos

Instale a biblioteca usehooks-ts usando o npm ou o yarn.

npm i usehooks-ts
ou
yarn add usehooks-ts

Vou dar um exemplo a seguir de como fazer o uso dessa lib em seu projeto, no nosso caso, vou utilizar do hook useFetch, para fazer uma chamada simples a essa API gratuita de fatos aleatórios do ilustre Chuck Norris, a chucknorris.io.

Para isso criei um componente chamado ChuckNorrisFactsRandom , que o único objetivo desse componente será exibir uma série de fatos icônicos sobre nosso Chuck Norris aleatoriamente, ou seja, toda vez que recarregar a página esses fatos serão recarregados visto que estaremos fazendo um Get para essa API, onde nosso endpoint sempre nos devolve um fato randômico.

import { useFetch } from "usehooks-ts";

interface ChuckNorrisJoke {
  value: string;
}

export const ChuckNorrisFactsRandom = () => {
  const { data, error } = useFetch<ChuckNorrisJoke>(
    `https://api.chucknorris.io/jokes/random`
  );

  if (error) {
    console.error(error);
    return <div>Error: {error.message}</div>;
  }

  if (data) {
    return (
      <div>
        <p style={{ fontStyle: "italic" }}>{data.value}</p>
      </div>
    );
  }

  return <div>Loading...</div>;
};

export default ChuckNorrisFactsRandom;

E no meu App eu vou chamar esse componente para renderizar na minha aplicação.

import { ChuckNorrisFactsRandom } from "./Components";

function App() {
  return <ChuckNorrisFactsRandom />;
}

export default App;

E o resultado é esse, nada estilizado mesmo, só para amostrar um exemplo de uso real de um dos hooks dessa biblioteca.

Hooks populares do usehooks-ts

Eu vou usar alguns dos próprios exemplos que tem na biblioteca, para mais detalhes é só dar uma olhada mesmo na própria documentação do usehooks-ts.

useDarkMode: Esse hook permite adicionar um tema escuro ao seu aplicativo. Veja o exemplo abaixo, ao pressionar cada botão ele vai mudar, depois é só você criar um arquivo no seu CSS global de temas, para implementar de fato essa funcionalidade, podendo até mesmo ter a opção de desativar ou ativar o tema, separado em métodos diferentes.

import { useDarkMode } from "usehooks-ts";

function App() {
  const { isDarkMode, toggle, enable, disable } = useDarkMode();

  return (
    <div>
      <p>Current theme: {isDarkMode ? "dark" : "light"}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={enable}>Enable</button>
      <button onClick={disable}>Disable</button>
    </div>
  );
}

export default App;

useHover: Esse hook ele permite você verificar se tem algum elemento na página sobre o efeito de hover utilizando de JavaScript para isso ao invés do CSS. No exemplo abaixo ao posicionar o mouse sobre a palavra unhovered ela é substituída por hovered, ao tirar ele volta para o que estava anterior.

import { useRef } from "react";
import { useHover } from "usehooks-ts";

function App() {
  const hoverRef = useRef(null);
  const isHover = useHover(hoverRef);

  return (
    <div ref={hoverRef}>
      {`The current div is ${isHover ? `hovered` : `unhovered`}`}
    </div>
  );
}

export default App;

useLocalStorage: Esse hook permite armazenar e recuperar dados no localStorage do navegador. No exemplo abaixo ele poderia ser facilmente combinado com o useDarkMode,para salvar o tema no navegador do usuário, no nosso caso fizemos diferente, mas também é uma opção. No nosso caso salvamos uma variável booleana chamada, darkTheme no nosso LocalStorage, e através do clique nesse botão seu valor e alterado para true ou false.

import { useLocalStorage } from "usehooks-ts";

function App() {
  const [isDarkTheme, setDarkTheme] = useLocalStorage("darkTheme", true);
  const toggleTheme = () => {
    setDarkTheme((prevValue: boolean) => !prevValue);
  };

  return (
    <button onClick={toggleTheme}>
      {`The current theme is ${isDarkTheme ? `dark` : `light`}`}
    </button>
  );
}

export default App;

Conclusão

A biblioteca usehooks-ts é uma valiosa ferramenta para desenvolvedores React que desejam aprimorar a produtividade e a legibilidade de seu código. Ela oferece uma coleção de hooks personalizados pré-construídos, projetados para simplificar tarefas comuns no desenvolvimento de aplicativos React com TypeScript. Esses hooks abstraem a complexidade de tarefas como gerenciamento de estado, requisições de API e interações com o ciclo de vida dos componentes, permitindo que os desenvolvedores se concentrem mais na lógica de negócios de suas aplicações. Embora a usehooks-ts possa acelerar o desenvolvimento, é importante considerar cuidadosamente as vantagens e desvantagens de sua utilização em um projeto específico, bem como a conformidade com as práticas recomendadas de desenvolvimento.