Pular para conteúdo

Aula 06 – Formulários e Validação (React Hook Form) 📝

Lidar com formulários pode ser trabalhoso. Hoje vamos aprender como simplificar esse processo usando a biblioteca mais popular do ecossistema: o React Hook Form.

🤯 O Problema do "Controlled Components"

No React tradicional, precisamos de um estado para cada campo de input. Em formulários grandes, isso gera muito código repetitivo (boilerplate).

🛠️ Introdução ao React Hook Form

Essa biblioteca foca em performance e simplicidade, permitindo gerenciar o formulário com menos re-renderizações.

Instalação:

$ npm install react-hook-form

Exemplo Básico:

import { useForm } from 'react-hook-form';

function Formulario() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (dados) => {
    console.log(dados);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("nome")} placeholder="Seu nome" />
      <input {...register("email")} placeholder="Seu e-mail" />
      <button type="submit">Enviar</button>
    </form>
  );
}

✅ Validação sem Dor

O React Hook Form já vem com suporte a regras de validação (required, minLength, pattern).

<input 
  {...register("senha", { required: true, minLength: 6 })} 
  type="password" 
/>
{errors.senha && <p>A senha deve ter pelo menos 6 caracteres.</p>}

🚀 Prática da Aula

Vamos criar um formulário de "Cadastro de Usuário" completo.

  1. Campos: Nome, E-mail, Senha e Confirmar Senha.
  2. Regra: Todos os campos são obrigatórios.
  3. Regra: O e-mail deve ser um formato válido.
  4. Ao enviar com sucesso, limpe o formulário e exiba um alerta de "Sucesso!".

📊 Por que usar React Hook Form?

graph TD
    A[Formulário React] --> B{Muitos Inputs?}
    B -- Sim --> C[React Hook Form: Mais rápido e menos código]
    B -- Não --> D[useState: Simples para 1 ou 2 campos]

Dica: Zod

Para validações complexas, você pode integrar o React Hook Form com o Zod, uma biblioteca de esquema de dados sensacional que veremos em breve!