diff --git "a/docs/Formul\303\241rios/1-React-Hook-Form.md" "b/docs/Formul\303\241rios/1-React-Hook-Form.md" new file mode 100644 index 0000000..41a8fc3 --- /dev/null +++ "b/docs/Formul\303\241rios/1-React-Hook-Form.md" @@ -0,0 +1,221 @@ +

+ + + +

+ +# Formulários – React Hook Form + +## O que é o React Hook Form? + +O **React Hook Form (RHF)** é uma biblioteca leve e performática para manipulação de formulários em aplicações **React**. +Seu principal objetivo é simplificar a criação, validação e submissão de formulários, reduzindo a necessidade de *boilerplate* e melhorando a performance através do uso dos **React Hooks**. + +Ao invés de controlar cada campo de formulário através de *states* e *handlers* (como em `onChange` e [`useState`](../Iniciando%20com%20React/8.1-useState.md)), o React Hook Form utiliza **referências diretas ([refs](../Iniciando%20com%20React/Refs.md))** para registrar e monitorar os campos, tornando o código mais limpo e eficiente. + +--- + +## Por que usar o React Hook Form? + +Criar formulários no React sem uma biblioteca pode rapidamente se tornar algo verboso e repetitivo. +Veja algumas vantagens do RHF: + +* ✅ **Performance:** reduz renderizações desnecessárias; +* ✅ **Validação integrada:** suporte nativo a validações síncronas e assíncronas; +* ✅ **Integração fácil:** funciona com *Yup*, *Zod* e outros validadores; +* ✅ **Menos código:** elimina a necessidade de `onChange` e `setState`; +* ✅ **Controle fino:** acesso direto ao estado do formulário (erros, valores, *dirty*, *touched* etc). + +--- + +## Instalação + +Para começar, basta instalar a biblioteca: + +```bash +npm install react-hook-form +# ou +yarn add react-hook-form +``` + +--- + +## Criando o primeiro formulário + +Vamos criar um exemplo simples de formulário de login com os campos **email** e **senha**. + +```jsx +import React from "react"; +import { useForm } from "react-hook-form"; + +export function LoginForm() { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); + + const onSubmit = (data) => { + console.log("Dados enviados:", data); + }; + + return ( +
+
+ + + {errors.email && {errors.email.message}} +
+ +
+ + + {errors.password && {errors.password.message}} +
+ + +
+ ); +} +``` + +### O que está acontecendo aqui? + +* **`useForm()`** inicializa o controle do formulário. +* **`register()`** conecta os campos ao RHF. +* **`handleSubmit()`** lida com o evento `onSubmit` e fornece os dados validados. +* **`formState.errors`** exibe mensagens de erro automaticamente. + +--- + +## Validação com *Yup* + +Podemos integrar o React Hook Form com o *Yup* para validações mais robustas e reutilizáveis. + +```bash +npm install @hookform/resolvers yup +``` + +```jsx +import React from "react"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import * as yup from "yup"; + +const schema = yup.object({ + email: yup.string().email("E-mail inválido").required("Campo obrigatório"), + password: yup + .string() + .min(6, "Mínimo de 6 caracteres") + .required("Campo obrigatório"), +}); + +export function LoginFormYup() { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(schema), + }); + + const onSubmit = (data) => console.log(data); + + return ( +
+ +

{errors.email?.message}

+ + +

{errors.password?.message}

+ + +
+ ); +} +``` + +Agora as validações são controladas pelo *Yup*, e o formulário só é submetido se todos os campos forem válidos. + +--- + +## Controle de estado e reset + +O RHF fornece métodos úteis como `reset`, `watch` e `setValue` para lidar com o estado dos campos. + +```jsx +const { register, handleSubmit, reset, watch } = useForm(); + +const onSubmit = (data) => { + console.log(data); + reset(); // limpa o formulário após o envio +}; + +const emailValue = watch("email"); // observa o valor em tempo real +``` + +Essas funções permitem criar formulários dinâmicos com comportamento avançado. + +--- + +## Integração com componentes externos + +O React Hook Form também permite integrar com bibliotecas de UI como **Ant Design**, **Material UI** ou **Chakra UI** utilizando o componente `Controller`. + +```jsx +import { Controller, useForm } from "react-hook-form"; +import { Input } from "antd"; + +export function ControlledInputExample() { + const { control, handleSubmit } = useForm(); + + const onSubmit = (data) => console.log(data); + + return ( +
+ } + /> + + + ); +} +``` + +--- + +## Boas práticas + +* Sempre defina mensagens de erro personalizadas. +* Use *defaultValues* para inicializar o formulário. +* Evite [`useState`](../Iniciando%20com%20React/8.1-useState.md) para controlar campos — o RHF já faz isso internamente. +* Prefira `Controller` apenas para componentes externos controlados. +* Valide com bibliotecas externas apenas quando necessário. + +--- + +## Links úteis + +* [Documentação oficial](https://react-hook-form.com) +* [HookForm + Yup Integration](https://react-hook-form.com/get-started#SchemaValidation) +* [React Hook Form no GitHub](https://github.com/react-hook-form/react-hook-form) + +--- + +

Made with :purple_heart:

+ +

+ + + +

+ \ No newline at end of file