O que é gancho?

No React, um gancho é uma função especial que permite gerenciar o estado, lidar com efeitos colaterais e usar outros recursos do React em componentes funcionais .

Hooks foram introduzidos na versão React 16.8. Antes de introduzir os ganchos, os componentes funcionais eram “sem estado”. Eles funcionaram como um componente de apresentação, o que significa um componente no React que é responsável por renderizar a interface do usuário, mas não possui lógica de negócios ou gerenciamento de estado. Ele recebe props de seu componente pai como entradas e as renderiza como saída. Se você deseja gerenciar um estado de componente ou lidar com efeitos colaterais, você precisa usar componentes baseados em classe.
Mas usando o gancho, os componentes funcionais podem gerenciar seu próprio estado e ter acesso a todos os ganchos conhecidos como useState, useMemo, useEffect e etc que anteriormente exigiam componentes de classe.

Por que devemos usar?

Devemos usar um gancho personalizado do React quando precisarmos reutilizar a lógica de estado entre vários componentes em nosso aplicativo. Hooks personalizados permitem que você empacote lógica complexa e gerenciamento de estado em uma função reutilizável que pode ser usada por vários componentes ao mesmo tempo.
Além disso, o gancho personalizado nos ajuda a manter nossos componentes limpos e organizados ao lidar com interações e renderização do usuário, em vez de ser complicado com gerenciamento de estado ou lógica complexa.

Cenário da vida real para usar o gancho personalizado de reação

Suponha que você tenha um formulário em seu aplicativo. Este formulário tem vários campos de entrada e você deve fazer alguma validação na entrada antes de enviar o formulário. Você também deseja exibir mensagens de erro se a entrada estiver em um formato inválido.
A lógica de validação poderia ser implementada em cada componente react que exibe um campo de formulário, mas isso levaria a muitos códigos duplicados e tornaria a lógica de validação mais difícil de modificar no futuro.
Então, o que você vai fazer
Aqui os ganchos personalizados entram em cena. Você pode criar um gancho personalizado que encapsula a lógica de validação e o gerenciamento de estado interno e, em seguida, usar esse gancho em cada componente de reação que renderiza um campo de formulário.

Funções Javascript VS React gancho personalizado

As funções Javascript e os ganchos personalizados do React são usados ​​para encapsular a lógica e reutilizá-la em diferentes partes do seu aplicativo. No entanto, existem algumas diferenças importantes entre funções e ganchos. React hooks são funções JS com o poder do React.

1. Objetivo: Geralmente, as funções Javascript são usadas para encapsular a lógica de reutilização, enquanto os ganchos personalizados do React são usados ​​para encapsular a lógica de estado de reutilização dentro de um componente React. Além disso, você poderá usar os ganchos integrados do React, como useState, useEffect e etc, para aumentar a lógica
2. Sintaxe: definimos funções Javascript usando a sintaxe de função tradicional ou a sintaxe de função de seta ES6, enquanto os ganchos personalizados do React devem seguir uma convenção de nomenclatura específica e o nome do gancho deve começar com o prefixo “use”
3. Uso: as funções Javascript podem ser usadas em qualquer lugar em seu aplicativo, enquanto os ganchos personalizados do React são usados ​​apenas dentro dos componentes do React

Para construir um gancho, você deve seguir estas etapas gerais

1. Identifique a lógica reutilizável: A primeira etapa é identificar a funcionalidade que você deseja encapsular em seu gancho. Pense em que tipo de funcionalidade se repete entre vários componentes. (Por exemplo, validar formulários no aplicativo)
2. Identifique as entradas e saídas: Depois de identificar a funcionalidade, você precisa definir as entradas e saídas do seu gancho.
   As entradas incluem os parâmetros que são passados ​​para o gancho, assim como as saídas incluem os valores retornados pelo gancho.
3. Codifique o gancho: Dentro do gancho, escreva o código que implementa a funcionalidade que você decidiu. Aqui você pode lidar com gerenciamento de estado, efeitos colaterais, chamadas de API ou qualquer outra lógica necessária.
4. Retorne os valores do gancho : Finalmente, retorne os valores que o gancho fornece. Isso inclui valores de estado, funções para atualizar o estado ou quaisquer outros dados exigidos pelo componente que usa o gancho.

Agora aprendemos as coisas necessárias para criar o gancho. Vejamos o resultado deste guia.

Em primeiro lugar, vamos criar campos de formulário e botão de envio. Cole o código escrito abaixo emApp.jsx

Aqui temos dois campos de formulário de código que são o primeiro nome e o sobrenome. E nomeamos esses dois campos como firstname, lastnamerespectivamente. Além disso, adicionamos um <small>elemento para exibir uma mensagem de validação. Por fim, adicionamos um <button>elemento para enviar o formulário.

Construir o gancho

Vamos continuar construindo o gancho que irá gerenciar a lógica de validação. Crie um novo arquivo chamado useForm.jsxe cole o código escrito abaixo.

Aqui, nomeamos nosso gancho como useForm. No react, os ganchos devem seguir uma convenção de nomenclatura especial: o nome do gancho deve começar com o prefixo “use”. O gancho de validação recebe um argumento que são os valores iniciais dos campos de formulário.
Para gerenciar o estado do campo de formulário e o estado de erro, usamos useStatehook.
Em seguida, criamos uma função chamada handleChangeesta função irá verificar se o valor do campo do formulário está vazio ou não quando o usuário alterar o valor do campo do formulário. Se o campo do formulário estiver vazio, esta função atualiza o errorsestado com uma mensagem de aviso (linha 12). Caso contrário, define o errorsestado como vazio.
A partir daí esta função atualiza o valuesestado com o texto digitado pelo usuário.
handleSubmitA função lida com o envio do formulário. A função verifica o errorsestado para ver se há algum aviso. Se não houver avisos, a função atualiza o errorsestado com uma mensagem de sucesso (Linha 23). Caso contrário, atualiza o estado com uma mensagem de alerta.
Por fim, o gancho retorna duas propriedades e duas funções que são values, errors, handleChange, handleSubmit.

Usando o gancho no App.jsx

Construímos os formulários e a lógica de validação até agora como parte do processo de desenvolvimento. Na próxima etapa, vamos usar nosso gancho de validação no formulário. Modifique o App.jsxarquivo

Para usar a lógica de validação, precisamos começar importando o gancho em App.jsx
A partir daí dentro do componente, podemos usar o gancho chamando o nome do gancho. Nesse caso, nosso gancho requer um argumento como entrada e, conforme mencionado anteriormente, ele retorna duas propriedades e duas funções.
Um parâmetro de entrada é um objeto que contém duas chaves: firstname, lastname
O Appcomponente produz um divelemento que inclui os campos do formulário, bem como o botão enviar Além disso, atualizamos o <input>elemento com propriedades value& onChange. O <input>valor do elemento é atribuído ao valuesretornado do useFormgancho.
Além disso, o valor da onChangepropriedade é atribuído ao handleChangeretornado douseFormgancho. Portanto, sempre que o usuário alterar, o texto da função <input>do elemento handleChangeserá levantado. useFormhook tratou desse evento.
Para exibir a mensagem de aviso, usamos <small>o elemento em cada um dos campos do formulário.
Por fim, sempre que o formulário for enviado, a handleSubmitfunção será invocada.

Conclusão

Em conclusão, ganchos personalizados são uma ferramenta poderosa para criar lógica reutilizável e combinável em aplicativos React. Ao encapsular a funcionalidade em ganchos personalizados, os desenvolvedores podem reduzir a duplicação de código e tornar seu código mais modular e sustentável.
Neste artigo, forneci uma explicação clara e concisa de como os ganchos personalizados funcionam e demonstrei seu uso com um exemplo prático. Seguindo as melhores práticas e diretrizes para ganchos personalizados, mostrei como os desenvolvedores podem criar seus próprios ganchos personalizados que podem ser facilmente reutilizados em diferentes componentes e aplicativos.
Além disso, discutimos a diferença entre a função JS e o gancho React e as etapas gerais que precisam ser seguidas para criar um gancho.

Se você achou este artigo útil, sinta-se à vontade para compartilhá-lo com sua rede e considere me seguir no Medium e no LinkedIn para obter mais conteúdo como este.