React: gerencie e valide formulários com o React Hook Form

Conhecendo o React Hook Form - Apresentação

Olá, tudo bem? Sou o Neilton, mas pode me chamar de Nei, se preferir. Estou muito feliz de estar com você neste curso!

Audiodescrição: Neilton Seguins é um homem cis, de pele negra. Usa uma camiseta laranja e óculos com armação retangular. Tem olhos castanhos escuros e cabelos pretos, curtos e encaracolados. Ao fundo, uma parede lisa com iluminação degradê do roxo ao azul.

No navegador, acessamos a aplicação da Voll, um formulário de cadastro. Ele solicita algumas informações pessoais, como nome, e-mail, telefone e uma senha.

Se clicarmos no botão "Avançar", nada acontece. Então, não sabemos se o formulário enviou alguma informação ou não. Como pessoa desenvolvedora, para sabermos o que aconteceu, abrimos o console e o analisamos.

Nisso, notamos que há um objeto vazio com o nome dos campos do formulário, que estão vazios também. Isso significa que o formulário não tem validação.

O que aprenderemos

Neste curso, aprenderemos como fazer validações em formulários React. Validaremos nossos campos, não permitindo mais que isso aconteça, afinal, não queremos nenhum campo vazio no back-end.

Por meio das validações, aprenderemos, por exemplo, como fornecer mensagem de erro para a pessoa usuária. Assim, ela receberá uma mensagem abaixo do campo, indicando o que aconteceu. Dessa forma, ficará ciente de como deve preencher o formulário.

Além disso, você também aprenderá a aplicar máscaras de validação, como com exemplo, para o telefone e muito mais. Há muita coisa interessante neste curso!

Pré-requisitos

Para que você tenha o melhor proveito do curso, é importante que você saiba React com Typescript.

Estamos muito contentes de estar aqui com você!

Agora, com tudo pronto, vamos começar?

Conhecendo o React Hook Form - Instalação do React Hook Form

No navegador Google Chrome, estamos com a aplicação Voll aberta.

Já preparamos todo o ambiente, ou seja, baixamos a aplicação na nossa máquina, abrimos ela no VS Code e instalamos as dependências com o comando npm install. Em seguida, executamos o comando npm run dev e agora está rodando no "http://localhost:5173".

Entendendo os problemas do formulário

Agora, analisaremos o formulário. Pressionamos a tecla "F12" para abrir o console. Os campos de preenchimento, não deveriam ser enviados vazios. Porém, se clicarmos no botão "Avançar", no centro inferior do formulário, visualizamos no console o objeto com os campos vazios. Não queremos enviar um formulário com informações vazias para o back-end.

Temos outro problema no terceiro campo do formulário, de Telefone. Se digitarmos uma string e se clicarmos em avançar, esses dados são submetidos.

Não existe um telefone que seja uma string. Podemos até receber o telefone no formato de string, mas queremos que ele contenha apenas números. Portanto, precisamos realizar algum tipo de validação no formulário.

Para realizar essa validação, usaremos a biblioteca React Hook Form, muito popular na comunidade React. Então, em uma nova guia do acessamos a documentação React Hook Form.

Essa é uma biblioteca flexível, altamente performática e permite que façamos validações de forma simples. Inclusive, essas validações são bastante simples e conseguiremos abstrair complexidade do nosso código, escrever menos código e ter uma performance maior nas nossas aplicações.

Agora abrimos a aplicação no VS Code. Para acessar a página de cadastro pessoal, navegamos pelo caminho src > pages > Cadastro > CadastroPessoal.tsx.

Essa página é um formulário e como podemos notar, da linha 5 até a linha 9, temos vários estados, um para cada campo. Fazemos isso para validar os dados da nossa aplicação.

Abaixo, também temos uma função de handleSubmit, seguido pela estrutura do formulário. Começando na linha 19 com o Form, que passa a função handleSubmit. Temos também o Fieldset com os campos de label, temos um input com um value e um onChange.

Podemos notar que nesse formulário não temos função de validação para nenhum campo. Sendo assim, lidaremos com esse problema utilizando a biblioteca React Hook Form.

Instalando a biblioteca React Hook Form

Para instalar a biblioteca, pressionamos o atalho "Ctrl + J" para abrir o terminal. Outra opção é na barra superior, clicar no botão identificado por reticências e depois em "Terminal > New Terminal".

Feito isso, digitamos o comando npm install react-hook-form e pressionamos "Enter".

npm install react-hook-form

Assim, a instalação da biblioteca é feita. Esse processo é rápido, pois a biblioteca é leve. Agora, já podemos utilizá-la. Faremos isso a seguir.

Até lá!

Conhecendo o React Hook Form - Hook useForm

Já realizamos a instalação da biblioteca React Hook Form, precisamos entender como ela nos auxiliará na validação dos formulários.

No VS Code, no arquivo CadastroPessoal.tsx, temos vários estados para cada campo do formulário, como para o nome, e-mail, telefone, senha, além de uma função handleSubmit.

Estamos passando o valor do estado do nome para o value do campo de Input, na linha 26. Também temos uma função onChange, que pega o setNome() e atualiza o estado de nome. Isso que está acontecendo na aplicação é o que chamamos de componentes controlados.

Cada componente de entrada, ou seja, o Input do formulário, é controlado, ele conhece seu próprio estado. Quando digitamos nele, através dessa função de onChange, atualizamos esse estado e o React, com o estado atualizado, vai simplesmente re-renderizar essa aplicação na nossa tela.

Dependendo do formulário que tiver, por exemplo, se for um muito grande, pode gerar vários problemas de performance e de desempenho. Por isso, utilizaremos o React Hook Form, pois com ele, conseguimos gerenciar melhor nossos formulários, dados e estados.

Trabalhando com componentes não controlados

Como não trabalharemos com estados, selecionamos o trecho de código da linha 5 até a 14 e apagamos. Além disso, até o fim do curso, você descobrirá que não será preciso usar nenhum useState. Isso porque a biblioteca gerenciará tudo para nós.

Feito isso, na linha 5 escrevemos const {}. Após as chaves, passamos o sinal de igual =, seguido de useForm(), esse hook vem da biblioteca React Hook Form.

Feito isso, verifique se a importação foi feita corretamente. No nosso caso, o useForm foi importado corretamente na linha 3.

Esse hook vai gerenciar nosso formulário, e ele retorna alguns métodos e funções que serão bastante úteis, principalmente para registrar e lidar com a submissão dos campos.

Na linha 6, nas chaves, passamos register. Repare que o VS Code nos ajuda nesse processo, se pressionarmos "Ctrl + Espaço", logo abaixo a ferramenta mostra as opções que podemos utilizar do Hook. Adicionamos vírgula e também pegamos o handleSubmit.

O register usaremos para registrar cada campo do formulário. Na linha 11, notamos um erro. No onSubmit, não passaremos a função handleSubmit, então apagamos. Entenderemos como ela funciona em breve.

O que nos interessa são nos campos de Input. Por exemplo, na linha 18, temos um value e também, na linha 19, um onChange. Não precisaremos mais dessas duas linhas. Então, apagamos, pois não estamos mais trabalhando com estados.

//Código omitido

const CadastroPessoal = () => {
  const { register, handleSubmit } = useForm();

  return (
    <>
      <Titulo>Insira alguns dados básicos:</Titulo>
      <Form onSubmit={}>
        <Fieldset>
          <Label htmlFor="campo-nome">Nome</Label>
          <Input
            id="campo-nome"
            placeholder="Digite seu nome completo"
            type="text"
          />
        </Fieldset>

//Código omitido

Agora, vamos espalhar, com a notação de Spread Operator, nosso objeto register. Então, abaixo de type, próximo à linha 18, abrimos e fechamos chaves. Dentro, passamos ...register.

Para registrar esse campo, precisamos dar um nome. Esse nome é único e cada campo do seu formulário precisa ter um nome único também. Se tiver dois iguais, o React informará que está tentando controlar o mesmo campo duas vezes.

Após o ...register, abrimos e fechamos parênteses. Dentro, adicionamos aspas simples e escrevemos nome. Assim, registramos o campo.

//Código omitido

<Input
    id="campo-nome"
    placeholder="Digite seu nome completo"
    type="text"
    {...register("nome")}
/>

//Código omitido

Esse ...register() é um objeto, então no início do código, próximo à linha 7, escrevemos const {} = register ('nome'). Agora, poderíamos pegar o que o register() retorna para nós. Ele retorna muita coisa para lidar com o campo de Input, como name, onBlur, onChange.

Se dentro das chaves pressionarmos "Ctrl + Espaço", visualizamos uma lista do que podemos pegar. São várias opções.

Mas, nesse caso, não usaremos essa abordagem. Vamos simplesmente espalhar isso no nosso componente de Input. Faremos isso para todos os outros campos.

Para isso, eliminaremos de cada campo do formulário o value e o onChange, que não estamos utilizando mais. Fazemos isso da linha até a 30. No lugar, passamos {...register('email')}.

//Código omitido

<Fieldset>
    <Label htmlFor="campo-email">E-mail</Label>
    <Input
        id="campo-email"
        placeholder="Insira seu endereço de email"
        type="email"
        {...register("email")}
    />

//Código omitido

Faremos os mesmo nos outros campos, mudando o nome de cada um. Apagamos o trecho da linha 37 até a 41 e adicionamos o ...register().

//Código omitido

<Fieldset>
    <Label>Telefone</Label>
    <Input
        id="campo-telefone"
        type="text"
        placeholder="Ex: (DDD) XXXXX-XXXX"
        {...register("telefone")}
    />

//Código omitido

Depois, repetimos o mesmo entre as linhas 47 até a 50. Ficando da seguinte forma:

//Código omitido

<Fieldset>
    <Label htmlFor="campo-senha">Crie uma senha</Label>
    <Input
        id="campo-senha"
        placeholder="Crie uma senha"
        type="password"
        {...register("senha")}
    />

//Código omitido

Por fim, entre as linhas 56 até a 59. Conforme abaixo:

//Código omitido

<Fieldset>
    <Label htmlFor="campo-senha-confirmacao">Repita a senha</Label>
    <Input
        id="campo-senha-confirmacao"
        placeholder="Repita a senha anterior"
        type="password"
        {...register("senhaVerificada")}
    />

//Código omitido

Agora o VS Code está reclamando aqui algumas coisas. Não estamos utilizando o handleSubmit em lugar nenhum. Então, próximo à linha 11, em Form, o apagamos. Depois, na linha 1, apagamos o import do useState.

Feito isso, salvamos o componente com essas alterações. Assim, já conseguimos registrar nossos campos.

Abordagem do React Hook Form

A abordagem que o React Hook Form trabalha é com componentes não controlados. Diferente dos componentes controlados, eles não conhecem seu estado, não manipulam seu próprio estado.

Todas as informações dele estão mais atreladas ao DOM real. É uma abordagem parecida como o HTML nativo funciona. Para manipular esses valores, instalamos uma ref nesses componentes.

O React Hook Form faz exatamente isso. Quando espalhamos esse registro no nosso componente, estamos passando para ele uma ref e o React Hook Form, por debaixo dos panos, conhecerá essa ref e manipular as informações e valores, sempre que o estado dos campos de entrada mudar.

Agora que já registramos cada campo do formulário, temos que aprender também como utilizar esse handleSubmit, para enviar essas informações, seja para uma API ou para nosso back-end.

Vamos descobrir isso no vídeo seguinte. Até lá!

Sobre o curso React: gerencie e valide formulários com o React Hook Form

O curso React: gerencie e valide formulários com o React Hook Form possui 110 minutos de vídeos, em um total de 50 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o React Hook Form
• Aplicando validações
• Lidando com erros
• Validando dados de uma API
• Componentes controlados