React Hook Form: a melhor forma de criar formulários no React
Se você busca simplificar a criação e validação de formulários no React, o React Hook Form é a ferramenta ideal. Vamos explorar como utilizá-lo para melhorar seu desenvolvimento de formulários e torná-los mais eficientes.
O que é o React Hook Form?
O React Hook Form é uma biblioteca leve para gerenciamento de formulários no React. Ela permite criar formulários sem a necessidade de componentes controlados, o que melhora a performance e reduz o número de re-renderizações. O React Hook Form foi criado para ser simples e direto, sem comprometer a flexibilidade. Ele utiliza os hooks do React para facilitar a construção de formulários robustos
Principais vantagens do React Hook Form:
- Performance aprimorada: Os formulários permanecem não controlados até o envio, resultando em menos re-renderizações.
- Validação integrada: Com suporte nativo para validações simples e integração com bibliotecas de validação externas como o Zod.
- Facilidade de uso: Hooks intuitivos como useForm, register, handleSubmit e reset, que permitem criar e gerenciar formulários de maneira eficiente.
Componentes não controlados vs. controlados
Em React, componentes controlados são aqueles em que o estado dos inputs é armazenado no state do componente, e o valor do input muda conforme o state muda. Já os componentes não controlados utilizam uma referência direta ao DOM para acessar os valores dos inputs.
O React Hook Form é baseado em componentes não controlados, o que reduz a necessidade de gerenciar o estado dos inputs a cada mudança. Isso resulta em melhor performance e uma lógica de código mais limpa.
Como funciona o React Hook Form?
Para começar a usar o React Hook Form, é necessário instalar a biblioteca:
npm install react-hook-form
Em seguida, podemos iniciar a criação de um formulário básico:
import React from "react"; import { useForm } from "react-hook-form"; export default function MyForm() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name", { required: "O campo nome é obrigatório" })} /> {errors.name && <span>{errors.name.message}</span>} <button type="submit">Enviar</button> </form> ); }
Nesse exemplo, o campo name é registrado utilizando o
register, que conecta o input ao sistema de gerenciamento do React Hook Form. Se o campo não for preenchido, uma mensagem de erro será exibida, demonstrando a validação simples que a biblioteca oferece.Validação de formulários com Zod
O Zod é uma poderosa biblioteca de validação de esquemas que pode ser integrada ao React Hook Form para validações mais avançadas. Para usá-lo, instale as bibliotecas necessárias:
npm install zod @hookform/resolvers
Agora, vamos integrar o Zod ao nosso formulário:
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(1, "O campo nome é obrigatório"), email: z.string().email("Formato de email inválido"), }); export default function MyForm() { const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(schema), }); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} /> {errors.name && <span>{errors.name.message}</span>} <input {...register("email")} /> {errors.email && <span>{errors.email.message}</span>} <button type="submit">Enviar</button> </form> ); }
Aqui, o Zod é utilizado para validar os campos de nome e email. Se o formato do email estiver errado ou o nome não for preenchido, uma mensagem de erro específica será exibida.
Integração com UI libraries (shadcn e React Hook Form)
O React Hook Form pode ser integrado facilmente com bibliotecas de interface de usuário (UI). Um exemplo popular é a integração com o shadcn, uma biblioteca de componentes estilizados que facilita a criação de interfaces. Veja como integrar os dois:
npm install @radix-ui/react-form
Exemplo de uso com React Hook Form:
import React from "react"; import { useForm } from "react-hook-form"; import { Form } from "@radix-ui/react-form"; export default function MyStyledForm() { const { register, handleSubmit } = useForm(); const onSubmit = data => { console.log(data); }; return ( <Form onSubmit={handleSubmit(onSubmit)}> <Form.Field> <Form.Label htmlFor="name">Nome</Form.Label> <Form.Control as="input" {...register("name")} id="name" /> </Form.Field> <button type="submit">Enviar</button> </Form> ); }
A integração do shadcn com o React Hook Form permite uma construção mais estilizada de formulários sem perder a simplicidade e as validações.
Manipulando arrays de campos com Field Arrays
Com o React Hook Form, também é possível lidar com arrays de campos dinamicamente, permitindo que usuários adicionem ou removam inputs conforme necessário:
import React from "react"; import { useForm, useFieldArray } from "react-hook-form"; export function DynamicForm() { const { control, register, handleSubmit } = useForm(); const { fields, append, remove } = useFieldArray({ control, name: "fields" }); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> {fields.map((field, index) => ( <div key={field.id}> <input {...register(`fields.${index}.name`)} placeholder="Nome" /> <button type="button" onClick={() => remove(index)}>Remover</button> </div> ))} <button type="button" onClick={() => append({ name: "" })}>Adicionar Campo</button> <button type="submit">Enviar</button> </form> ); }
Esse exemplo mostra como adicionar e remover dinamicamente campos de entrada, usando o hook useFieldArray.
Gostou do conteúdo? Temos algo a mais para você! 🤩 Dê uma olhada nesse vídeo incrível que preparamos no nosso canal do YouTube, onde mostramos na prática a implementação dessa ferramenta incrível.
Além disso, preparamos um exemplo de código direto no StackBlitz para você testar e explorar: Clique aqui para testar o código 👈
Conclusão
O React Hook Form é uma das melhores opções para criar formulários no React, combinando simplicidade e eficiência. Sua capacidade de lidar com formulários não controlados melhora a performance das aplicações, enquanto sua integração com bibliotecas como Zod e shadcn oferece flexibilidade e robustez na validação e estilização dos campos. Se você busca melhorar o desenvolvimento de formulários em React, essa biblioteca é definitivamente uma escolha poderosa.
Se você está pronto para enfrentar desafios reais e conquistar o mercado com suas habilidades, a formação em React da Rocketseat vai te preparar para isso! Vamos te guiar em uma jornada prática e intensa, ensinando a resolver problemas complexos com React e a construir aplicações de alto impacto. Venha fazer parte da comunidade e acelere sua carreira com a gente! 🚀
