React Hooks: o que são e como usá-los?

React É muito popular entre os desenvolvedores atuais e um tema que eles devem conhecer muito bem são os hooks, que são relativamente novos e foram implementados em 2013 para solucionar deficiências que esta biblioteca apresentava durante seu lançamento.

Neste artigo vou explicar a definição, importância e forma de usar o hook useState e eu vou te ensinar como criar os seus próprios hooks.

O que são os hooks?

Os hooks são funções do React que nos permitirão conectar (anexar ou anexar uma funcionalidade ao componente) ao estado e ao ciclo de vida da aplicação (entre outras funcionalidades). Eles foram criados especificamente para componentes funcionais.

Além do significado de "ficar fisgado", devemos levar em consideração estes conceitos:

▶️ Os estados, em palavras muito simples, são variáveis ​​que armazenam e alteram informações sobre um componente.

▶️ O ciclo de vida refere-se a funções executadas em momentos diferentes e que realizam ações diferentes.

Os hooks surgiram na versão 16.6 do React e já estáveis ​​na versão 16.8.0, resolvendo problemas como:

• Reutilização de código entre componentes.
• Comprimento dos componentes, tornando-se algo muito complexo de entender.
• Otimizar o uso de this.

Antes desta versão, a solução mais viável era que cada problema fosse resolvido individualmente, mas como uma bola de neve, o código dos desenvolvedores foi ficando cada vez maior.

Analisando-o, chegaram à conclusão de que não se tratava de problemas separados, mas de um só. A partir daqui nascem os hooks, elementos e funções simples com estado e ciclo de vida que conectam componentes funcionais, potencializando suas características de gerenciamento que o React oferece como se fosse uma classe. Por esse motivo, agora é mais fácil reutilizar na lógica de componentes, mais declarativo e resumido de fazer.

Que tipos de hooks existem?

No React temos dois tipos:

• Predefinidos: Nós os reconhecemos por todos terem o prefixo use, por exemplo: useState.
• Custom Hooks: Eles são criados de forma conveniente. Como regra geral, eles têm o mesmo prefixo use.

Neste ponto, acho que você deve estar se perguntando: por que usar hooks em vez de classes? Uma resposta simples é que os hooks aplicam a filosofia de composição explícita e fluxo de dados dentro de um componente e não apenas no componente em si, além de não terem aninhamentos desnecessários em sua árvore de componentes. Portanto, eles nos oferecem um código homogêneo. Dada a sua simplicidade em experimentá-los, é bastante fácil adaptar-se a eles.

Limites no uso de hooks

Para utilizá-los corretamente, você deve levar em consideração as seguintes regras:

✅ Você deve chamar hooks apenas no nível superior. Evite chamá-los dentro de condicionais, funções aninhadas ou dentro de loops. Isso garante que os ganchos sejam chamados em cada renderização do componente, na mesma ordem.

✅ Evite chamar hooks de funções JavaScript regulares. Em vez disso, faça isso a partir do componente funcional ou de um custom hook ou hook personalizado.

Seguindo essas regras, você evita bugs em suas aplicações React, já que toda a lógica de estado de um componente é homogênea.

Usar um hook

No React temos vários hooks definidos, compatíveis com todas as plataformas e prontos para uso. Neste guia, mostrarei um hooks useState. Se quiser mais informações sobre os demais, convido você a ler a documentação oficial de React.

📌 useState

Encontraremos esse hook com mais frequência (se não em praticamente todos) aplicativos React. Permite o gerenciamento de estados, ou seja, quando precisamos de uma variável para alterar dados em momentos diferentes, utilizamos este estado.

🚀 Usarei o Visual Studio Code como editor de código e o Vite para criar os exemplos como ilustração do tema.

Importar o hook

import { useState} from ‘react’

Sintaxe

const [elemento, setElemento] = useState(valorInicial)

Exemplo de UseState

Neste exemplo, temos o componente App.jsx. A primeira coisa que devemos usar para implementar o gancho é vista na primeira linha:

import { useState } from ‘react’

Para definir as variáveis, será utilizado um array com o primeiro valor do nome que desejamos e no segundo o prefixo set, seguido do nome da primeira variável, utilizamos CamelCase. Neste caso, a variável se chama valor e a atribuímos ao estado (useState) inicializando-a em 0 (zero), pois precisamos dela para contar os cliques dos botões.

const [valor, setValor] = useState(0)

Temos a alteração do valor implementada no onClick. Fazemos isso utilizando os segundos dados do array que definimos (SetValor), com os quais podemos atualizar o estado. Ou seja: atualizamos os dados de cada clique com os dados que inicialmente tinham aumentando em um:

setValor(valor => valor + 1)

Para acessar o valor, fazemos isso entre chaves da seguinte forma:

<button> El valor actual es de: { valor } </button>

Os estados podem ser inicializados com qualquer tipo de dados (inteiro, booleano, string, etc.) e tratados da mesma maneira. Convido você a ler mais no documentação oficial. A seguir, mostro como declará-los:

Agora um exemplo para coletar dados com useState:

No exemplo temos um formulário com três entradas para nome, sobrenome e perfil do LinkedIn. Portanto, esses são os atributos do nosso objeto:

const [dados, setDados] = useState({

nome: 'Anna',

sobrenome: 'Juárez',

linkedln:'https://www.linkedin.com/in/ana-juarez01/'

})

Para obter os elementos que inserimos no input, adiciona-se o método onCharge e os dados são capturados inserindo-os no estado, sempre utilizando o segundo valor que começa com o prefixo set, neste caso setData:

onChange = {e => { setDados({...dados, nome: e.target.value}) }}

Para acessar os dados:

<p> Nome: { dados.nome } </p>

Custom Hooks

Os custom hooks são criados por nós para refatorar nosso código, ou seja, nos permitem lidar com diversos estados que se repetem em diferentes componentes. Com isso nos ajuda a separar ou encapsular partes do código para torná-lo mais declarativo e visualmente mais limpo.

📌 Criar um custom hook

Anteriormente vimos como podemos usar o useState, então neste exemplo criaremos um ToDo básico que adiciona e remove uma tarefa da lista usando esse hook:

👉 Usarei Visual Studio Code como editor de código. Peguei o SVG da página HeroIcons.

Usamos useState para atualizar os dados da tarefa e percebemos que usamos setTodo repetidamente. Isso o torna perfeito para extraí-lo para um hook personalizado (custom hook) e é feito da seguinte maneira:

Passo 1: Identificamos o código que se repete (neste caso a atualização do estado).

Passo 2: Criamos uma pasta chamada hooks no nível da pasta src do nosso projeto React e criamos um arquivo com o nome que daremos ao hook.

Passo 3: No novo arquivo extraímos o useState:

const [todo, setTodo] = useState(data)

Os dados que contêm o estado são as informações iniciais que temos no componente ToDo. Veremos isso mais tarde, primeiro vamos definir o hook.

Passo 4: Como observamos, precisamos adicionar e deletar a nova tarefa, mas sem repetir o código, então fazemos isso criando uma função que executa a ação:

const adicionarTarefa = (tarea) => {

tarefa.id = Date.now()

setTodo([...todo, tarefa])

}

Você receberá por parâmetro a tarefa a ser adicionada. Usamos Date.now() para garantir que o identificador nem sempre seja o mesmo. O setTodo recebe o array que inicializamos, bem como a nova tarefa que adicionamos com o novo identificador.

const eliminarTarefa = (tarefaID) => {

const tarefasFiltradas = todo.filter(item => item.id != tarefaID)

setTodo(tarefasFiltradas)

}

Para deletar, recebemos o identificador da tarefa que devemos remover e, com a ajuda do método filter, a constante TarefasFiltradas recebe um array com a tarefa deletada. Com isso atualizamos o status.

Passo 5: Agora que temos o estado e as funções que realizam o processo, devemos devolvê-los porque iremos utilizá-los no componente ToDo:

return [ todo, adicionarTarefa, eliminarTarefa]

Passo 6: Precisamos inicializá-lo com as informações que temos no componente ToDo. Resolvemos isso enviando um parâmetro da seguinte forma:

No componente ToDo importamos o hook e o utilizamos como se fosse um predefinido, assim:

import useTodo from './hooks/useTodo'

Desta forma, trazemos as funções que exportamos do hook:

const [todo, adicionarTarefa, eliminarTarefa] = useTodo(iniciais)

Feito tudo isso, o código ficaria assim:

O componente ToDo:

O custom hook:

Esta é a aparência em operação:

Podemos ver que já delegamos tudo para useTodo e que não precisamos editar a lógica porque ele faz isso sozinho. Em nosso componente ToDo sabemos que ele adiciona e exclui declarativamente porque internamente não olhamos a lógica. Esse é o objetivo dos custom hooks.

Conclusão

Os hooks são essenciais em nosso código. Devemos saber utilizá-los e para isso devemos praticar porque embora alguns possam parecer fáceis, têm o seu grau de complexidade. Recomendo que você entre na documentação oficial do React, bem como veja as perguntas mais frequentes e procure um repositório onde haja exemplos (como rehooks) para que você possa replicá-los 🚀.

Espero ter ajudado a apresentar a você o mundo dos hooks com React. Nunca deixe de praticar todo o conhecimento para se tornar cada vez melhor 💻.

Até logo 🚀!