Além de useState e useEffect: Desenvolva seus próprios Hooks, que Melhoram a Produtividade e a Qualidade do Código.

O React é uma biblioteca JavaScript amplamente utilizada para a criação de interfaces de usuário interativas e reativas. Uma das características mais marcantes do React é a introdução dos Hooks, que revolucionaram a forma como os componentes funcionais são construídos e gerenciados. Neste artigo, exploraremos o que são os Hooks, porque eles são importantes, como criar seus próprios Hooks personalizados e como utilizá-los para melhorar a experiência de desenvolvimento.

O que são Hooks no React?

Os Hooks ou numa tradução literal ganchos, são funções especiais que permitem que você ligue recursos de estado e comportamento aos componentes funcionais do React. Antes da introdução dos Hooks, a criação de componentes que possuíam estado e ciclo de vida complexos era mais comumente realizada através de componentes de classe, como o componentDidMount() por exemplo. No entanto, com a adoção de Hooks, é possível escrever componentes funcionais mais legíveis, reutilizáveis e fáceis de testar.

Existem diversos hooks integrados nativamente no react, eu não vou prolongar muito o assunto, pois pretendo trazer um artigo somente para isso, mas posso citar brevemente alguns como o useState, useEffect, useContext entre outros que breve irei trazer uma review de como usá-los e o que cada um faz.

O foco aqui deste artigo e falar um pouco sobre os hooks e ensinar como criar seus próprios hooks personalizáveis no react. Vou citar também, pelo meu ponto de vista, suas vantagens e desvantagens de criar seus próprios hooks.

Vantagens dos Hooks

1. Maior Legibilidade

Os Hooks permitem que você divida a lógica do componente em unidades menores e específicas, tornando o código mais legível e fácil de compreender.

2. Reutilização de Lógica

Você pode criar Hooks personalizados para encapsular lógica específica e reutilizá-los em diversos componentes, promovendo a modularidade e evitando repetição de código.

3. Facilidade de Teste

Os componentes funcionais com Hooks são mais simples de testar, uma vez que a lógica está desacoplada em unidades menores e as dependências podem ser injetadas facilmente.

4. Melhoria na Performance

O React otimiza automaticamente a renderização de componentes com base nas dependências dos Hooks, resultando em melhorias de performance.

Possíveis Desvantagens

Embora os Hooks ofereçam muitas vantagens, é importante estar ciente de suas possíveis desvantagens:

1. Curva de Aprendizado

A transição de componentes de classe para componentes funcionais com Hooks pode exigir uma curva de aprendizado para desenvolvedores que não estão familiarizados com essa abordagem.

2. Abstração Excessiva

Em alguns casos, a abstração da lógica em Hooks personalizados pode tornar o código mais complexo e difícil de entender, se não for feita de maneira cuidadosa.

3. Performance Pobre em Casos Extremos

Embora a maioria das aplicações se beneficie da otimização automática dos Hooks, casos extremos podem levar a problemas de performance se os Hooks não forem utilizados de forma adequada.

Dito isso, apontei algumas possíveis vantagens no meu ponto de vista e desvantagens, sinta-se livre para concordar ou discordar dos pontos aqui citados, vamos agora para como criar seus hooks e por que criá-los.

Criando Seus Próprios Hooks Personalizados

A criação de Hooks personalizados é uma prática poderosa que permite encapsular lógica e funcionalidade específicas para seu aplicativo.

Vamos criar primeiramente dentro de nosso projeto React, uma pasta chamada “hooks”, é uma boa convenção utilizar desse nome, mas não chega a ser um requisito.

Assim como também é uma boa prática começar ao dar o nome para seu hook de chamar de “use”, como exemplo os nativos do próprio react, useRef, etc.

No nosso caso, eu vou criar um hook personalizado de exemplo para um site de advogados. Neste cenário, um advogado pode precisar rastrear o tempo gasto em diferentes casos e atividades.

Vamos criar um Hook chamado useTimeTracker que permite ao advogado registrar o tempo gasto em uma atividade específica.

No componente useTimeTracker vamos fazer o seguinte:

import { useState } from 'react';

function useTimeTracker() {
  const [timeEntries, setTimeEntries] = useState([]);

  const addTimeEntry = (activity, hours) => {
    const newEntry = {
      activity,
      hours,
      timestamp: new Date().toISOString(),
    };
    setTimeEntries([...timeEntries, newEntry]);
  };

  return { timeEntries, addTimeEntry };
}

export default useTimeTracker;

Agora, vamos considerar como um componente de um site de advogados poderia utilizar esse Hook personalizado, para isso vamos criar dentro da nossa pasta de componentes o arquivo TimeTrackingComponent:

import React from 'react';
import useTimeTracker from '../hooks/useTimeTracker';

function TimeTrackingComponent() {
  const { timeEntries, addTimeEntry } = useTimeTracker();
  const [activity, setActivity] = React.useState('');
  const [hours, setHours] = React.useState('');

  const handleAddTimeEntry = () => {
    if (activity && hours) {
      addTimeEntry(activity, parseFloat(hours));
      setActivity('');
      setHours('');
    }
  };

  return (
    <div>
      <h2>Registro de Tempo</h2>
      <div>
        <input
          type="text"
          placeholder="Atividade"
          value={activity}
          onChange={(e) => setActivity(e.target.value)}
        />
        <input
          type="number"
          placeholder="Horas"
          value={hours}
          onChange={(e) => setHours(e.target.value)}
        />
        <button onClick={handleAddTimeEntry}>Registrar Tempo</button>
      </div>
      <div>
        <h3>Registros de Tempo</h3>
        <ul>
          {timeEntries.map((entry, index) => (
            <li key={index}>
              Atividade: {entry.activity}, Horas: {entry.hours}, Data: {entry.timestamp}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default TimeTrackingComponent;

E no nosso App, vamos chamar esse componente, da seguinte maneira:

import TimeTrackingComponent from "./components/TimeTrackingComponent"


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

export default App;

Neste exemplo, o Hook useTimeTracker encapsula a lógica de registro de tempo e gerenciamento de entradas. O componente TimeTrackingComponent utiliza esse Hook para permitir que o advogado registre suas atividades e as horas gastas em cada atividade. Isso proporciona um código mais limpo e reutilizável, além de uma experiência mais intuitiva para o usuário.

O uso de Hooks personalizados permite que a lógica de negócios seja separada dos componentes de apresentação, facilitando a manutenção, o teste e a reutilização do código. No contexto de um site de advogados, o Hook useTimeTracker poderia ser estendido para incluir recursos adicionais, como a categorização das atividades, a geração de relatórios de tempo, entre outros.

Esse código poderia ficar melhor refatorado utilizando de outras abordagens e até estilizado, porém como esse não é o foco, resolvi focar somente na criação e explicação dos hooks, fazendo tudo do modo que coloquei aqui, você terá algo assim sendo renderizado em sua tela.

Conclusão

Os Hooks no React trouxeram uma nova maneira de desenvolver componentes funcionais poderosos e reutilizáveis. Eles melhoram a legibilidade, a reutilização de lógica e a facilidade de teste dos componentes, além de promover uma experiência de desenvolvimento mais moderna e eficiente. Criar seus próprios Hooks personalizados é uma prática recomendada para encapsular lógica específica e promover a modularidade em seu código. No entanto, é importante pesar as vantagens e desvantagens para escolher a abordagem certa para cada situação.

Lembre-se de que, como qualquer ferramenta, os Hooks devem ser usados com sabedoria e discernimento para garantir que seu código seja limpo, eficiente e fácil de manter.

Além de não ter a questão se é ou não melhor que componentes de classes, apenas outra abordagem de se trabalhar, breve também pretendo trazer um artigo falando um pouco da abordagem de Classes no React, no mais é isso e aproveitem e utilizem bastante como bem desejar em seus códigos.