Criando seu próprio Hook customizado no React

Os Hooks nos permitem usar os recursos do React, como gerenciar o estado de um componente e/ou executar um efeito seguinte a certas alterações ocorrem no(s) estado(s) sem escrever uma classe. As possibilidades existentes no React incluem o useState, useEffect, useContext, useMemo, useCallback, entre outros. No entanto, também é possível criar Hooks personalizados para adicionar recursos específicos ao seu aplicativo.

Neste artigo, veremos como criar Hooks personalizados no React e como eles podem ser úteis para simplificar o código. Apenas alertar que existe um artigo explicando e falando sobre Hooks e como funcionam: https://dev.to/altencirsilvajr/o-conceito-de-hooks-e-como-o-utilizar-3fi7 .

Criando seu próprio Hook

Para criar seu próprio Hook(algum de seus mais diversos exemplos citados acima) basta o importar e utilizar dentro de uma função e retornar os valores desejados. Vale destacar que é possível usar mais de um Hook.

Vejamos um exemplo Hook de formulário de cadastro para usuário que contém um input de nome e um input de email. Você pode usar o Hook useInput para controlar ambos os inputs da seguinte forma:

import { useInput } from './useInput';

function CadastroUsuario() {
  const [nome, handleNomeChange] = useInput('');
  const [email, handleEmailChange] = useInput('');

  function handleSubmit(sub) {
    sub.preventDefault();
    console.log(`Nome: ${nome}, Email: ${email}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nome:
        <input type="text" value={nome} onChange={handleNomeChange} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <button type="submit">Cadastrar</button>
    </form>
  );
}

No exemplo acima, o componente CadastroUsuario utiliza o Hook useInput para controlar o estado dos inputs de nome e email. O valor atual de cada input é armazenado nas variáveis nome e email, enquanto as funções handleNomeChange e handleEmailChange são usadas para atualizar os valores quando o usuário digita algo.

Com isso, vimos a utilidade de Hooks na criação do nosso código e até como criar um. A facilidade para reutilizar a lógica em vários componentes diferentes e após isso o renderizar, simplifica o código e o mantém mais limpo de ler e entender, além da possibilidade e execução de tarefas que variam desde a criação de uma área de cadastro até a criação de envio de nomes para um aplicativo.