Validação de Formulários com React-Hook-Form e Zod
Vitor Rios
Posted on January 5, 2024
Introdução
Gerenciar formulários em aplicações React pode ser desafiador, especialmente quando se trata de validação e gerenciamento de estados. A combinação de React-Hook-Form, TypeScript e Zod oferece uma solução elegante e eficiente para esses desafios. Este artigo explora os benefícios dessa integração, demonstrando como ela simplifica o gerenciamento de formulários, comparando com a abordagem tradicional usando useState.
Gerenciamento Tradicional de Formulários com useState
Primeiro, vejamos um exemplo de gerenciamento de formulário com useState:
import React, { useState } from 'react';
const TraditionalForm = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [errors, setErrors] = useState({ name: '', email: '' });
const validate = () => {
let isValid = true;
const errors = { name: '', email: '' };
if (!name) {
errors.name = 'O nome é obrigatório.';
isValid = false;
} else if (name.length < 3) {
errors.name = 'O nome deve ter mais de 3 caracteres.';
isValid = false;
}
if (!email) {
errors.email = 'O email é obrigatório.';
isValid = false;
} else if (!/\S+@\S+\.\S+/.test(email)) {
errors.email = 'Email inválido.';
isValid = false;
}
setErrors(errors);
return isValid;
};
const handleSubmit = (event) => {
event.preventDefault();
if (validate()) {
// Lógica de submissão do formulário
console.log('Formulário submetido:', { name, email });
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Nome"
/>
{errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
</div>
<div>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
/>
{errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
</div>
{/* Outros campos e botão de submit */}
<button type="submit">Enviar</button>
</form>
);
};
export default TraditionalForm;
Esta abordagem requer a manutenção de estados separados para cada campo e lógica manual de validação, o que pode tornar o componente extenso e difícil de manter, especialmente em formulários complexos.
Antes de mergulharmos nos exemplos, é necessário configurar nosso ambiente com as bibliotecas necessárias. Aqui estão os passos para configurar React-Hook-Form e o Zod em seu projeto React.
Instalando as Dependências
Execute o seguinte comando para instalar React-Hook-Form e Zod:
npm install react-hook-form zod @hookform/resolvers
Agora, vamos introduzir React-Hook-Form e Zod, utilizando TypeScript para uma integração tipo-segura.
Configurando o Formulário com React-Hook-Form e Zod
import React from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
const schema = z.object({
name: z.string().min(3, 'Nome é obrigatório'),
email: z.string().email('Email inválido')
});
type FormData = z.infer<typeof schema>;
const ModernForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
resolver: zodResolver(schema)
});
const onSubmit = (data: FormData) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name')} />
{errors.name && <p>{errors.name.message}</p>}
<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}
{/* Outros campos e botão de submit */}
</form>
);
};
Benefícios da Abordagem Moderna
- Menos Boilerplate: React-Hook-Form reduz significativamente o código necessário para gerenciar estados e eventos de formulário.
- Validação Integrada: Zod oferece uma forma declarativa e poderosa de definir esquemas de validação, simplificando a lógica de validação.
- Mensagens de Erro Gerenciadas: As mensagens de erro são gerenciadas de forma centralizada e automatizada.
- Tipagem Forte com TypeScript: A integração com TypeScript assegura que os dados do formulário estejam sempre alinhados com o esquema definido, melhorando a segurança e a previsibilidade do código.
Comparação e Conclusão
Comparando as duas abordagens, é evidente que React-Hook-Form, combinado com Zod e TypeScript, oferece uma solução mais limpa, organizada e eficiente para o gerenciamento de formulários em React. O código torna-se mais legível e fácil de manter, enquanto a validação e o gerenciamento de erros são simplificados e mais robustos. Esta stack é particularmente útil em formulários grandes e complexos, onde a abordagem tradicional pode se tornar rapidamente insustentável. Em suma, a adoção de React-Hook-Form, TypeScript e Zod em projetos React não só melhora a qualidade do código, mas também acelera o processo de desenvolvimento, permitindo que os desenvolvedores se concentrem mais na lógica de negócios e menos na mecânica do gerenciamento de formulários.
Posted on January 5, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related