React: validação de formulários com React Hook Form | Alura Cursos Online
React: validação de formulários com React Hook Form
10 min10 minutos de leitura
10 min10 minutos de leitura
Você já se viu precisando validar e gerenciar cada campo de dados em formulários com React?
Imagine a situação: você está navegando em um projeto e se depara com o desafio de manter formulários organizados e livres de erros. Os formulários são complexos com muitos campos e o seu código pode ficar confuso e difícil de manter.
Autor(a)
Neilton Seguins
Bacharel em Ciência e Tecnologia e Pós Graduado em FullStack Development. Atualmente estou como Desenvolvedor de Software na Alura focado no front-end. Também amo ouvir e tocar música, ler livros e mangás e assistir séries.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Essa hipótese te parece familiar?
É aqui que entra o React Hook Form. Essa biblioteca cuida de todo o processo de validação de formulários, permitindo que você crie formulários eficientes e com menos código.
Ela é bastante flexível, com validações baseadas em restrições que aproveitam as marcações do HTML existente.
É super leve e minimiza o número de renderizações na página, melhorando o desempenho da mesma.
Então neste artigo vamos explorar como o React Hook Form faz o gerenciamento e a validação dos campos de nossos formulários.
Você irá conhecer:
Diferença de componentes controlados e não controlados;
Como o React Hook Form gerencia e valida os campos;
Validação de componentes customizados;
Validação de componentes de bibliotecas de terceiros.
E muito mais. Aperta o cinto e vamos nessa!
Qual é a diferença entre componentes controlados e não controlados?
Antes de trabalhar com o React Hook Form é crucial entender a diferença entre componentes controlados e não controlados, pois a biblioteca possui diferentes formas de lidar com os dois tipos. Então vamos entender melhor cada um.
Isso significa que em um formulário, o estado do input não é conhecido por ele a menos que você consiga essa informação usando outros recursos, por exemplo, o useRef().
importReact, { useRef } from'react';
functionFormulario() {
const nomeRef = useRef();
const emailRef = useRef();
consthandleSubmit = (e) => {
e.preventDefault();
// Acessando os valores dos inputs diretamente dos elementos do formulárioconsole.log(nomeRef.current.value);
console.log(emailRef.current.value);
};
return (
<formonSubmit={handleSubmit}><input
=
=
=
/>
Enviar
);
}
Essa abordagem é mais próxima da forma como o HTML funciona normalmente, ou seja, os valores desses componentes são definidos e lidos através de atributos do HTML, como value, checked (para checkboxes), selected (para select), etc.
import'./App.css'functionApp() {
constonFormSubmit = (event) => {
event.preventDefault()
const form = event.target;
const inputs = form.elements;
const values = {};
for (let i = 0; i < inputs.length; i++) {
const input = inputs[i];
if (input.name) {
values[input.name] = input.value;
}
}
console.log(values);
}
return (
<><formonSubmit={onFormSubmit}>
enviar
)
}
Isso significa que os valores dos campos são armazenados como parte do estado do componente.
Os valores dos campos do formulário são atualizados em resposta às mudanças de estado do React. Você já teve ter visto componentes controlados como esse:
No entanto, independente de você usar componentes controlados ou não controlados, pode ser que seus formulários possam se tornar difíceis de manter.
Em momentos assim vale a pena conhecer uma maneira de gerenciá-los. E é aí que entra o React Hook Form.
Por dentro do React Hook Form
Essa biblioteca cuida de todo o processo de validação de formulários, permitindo que você crie formulários eficientes, flexíveis e performáticos, já que ela remove as renderizações desnecessárias.
O React Hook Form utiliza uma abordagem não controlada para gerenciar o estado dos campos do formulário, o que significa menos código e melhor desempenho.
Com o React Hook Form, você registra os campos do seu formulário usando a função register, que basicamente associa um campo de entrada HTML a um estado interno da biblioteca.
Isso permite que o React Hook Form gerencie o estado do formulário, sem a necessidade de criar estados separados para cada campo.
O register retorna algumas funções importantes. O ref nos permite obtermos os valores desse campo, e por meio de uma lógica interna conseguimos atualizar este valor com o onChange através do React Hook Form.
Componentes customizados
Em algumas situações, pode ser que sua aplicação já possua componentes desenvolvidos por você (inputs, selects / dropdown, radio button, checkbox…) seguindo os padrões de design da sua equipe.
Em casos como esse, faz mais sentido que haja a integração com a biblioteca React Hook Form do que desenvolver componentes novos do zero. Vamos ver como implementar isso, usando de exemplo o seguinte componente <Select>:
No componente Select, utilizamos forwardRef() para passar a ref diretamente para o select do HTML.
Isso nos permite integrar facilmente o componente com o React Hook Form, mantendo a referência ao campo de idade (age).
Por padrão, os nós do DOM de um componente são privados. No entanto, às vezes é útil expor um nó do DOM ao seu componente pai, por exemplo, para permitir que ele seja focável, ou neste caso para ter acesso aos atributos como value, onchange, name, etc.
O forwardRef permite que seu componente exponha um nó do DOM ao componente pai com uma ref.
No exemplo anterior, o componente de <Input /> recebe as props label, o register e um required. O register é retornado da biblioteca React Hook Form, enquanto que o required é um objeto contendo as regras de validação que o register pode receber.
Você poderia usar estes componentes da seguinte forma:
Você pode estar se perguntando: “Mas e em casos onde usamos componentes de UI de bibliotecas de terceiros para criar a interface da nossa aplicação?”
É uma ótima pergunta! Vamos entender como trabalhamos com esses tipos de componentes.
Integrando com bibliotecas de UI
Quando estamos usando bibliotecas de componentes como MUI e Ant Design, podemos integrar a React Hook Form sem problemas, mesmo quando esses componentes não aceitam diretamente uma ref.
Nesse tipo de cenário o React Hook Form cuida de todo o processo de registro dos nossos componentes:
Dentro do formulário, temos dois componentes Controller, um para cada campo (nome e senha).
O Controller é usado para integrar campos de entrada de bibliotecas externas ao react-hook-form.
Este componente recebe algumas props, entre elas um name para servir de identificador único para o campo, um render, que renderiza o componente externo que estamos usando e um control, que será responsável por controlar o componente externo.
E é dessa forma que conseguimos integrar a biblioteca React Hook Form com componentes de bibliotecas de UI externas.
O React Hook Form é uma ferramenta poderosa para simplificar a validação de formulários no React.
Ao adotar uma abordagem não controlada e oferecer suporte a componentes controlados por meio do Controller, a ferramenta permite criar formulários eficientes, com menos código e melhor desempenho.
Se você quer aprofundar seus conhecimentos em formulários no React, sugiro que faça nossa formação de React Formulários.
Lá, você aprenderá a validar formulários usando bibliotecas populares como o Formik, React Hook Form, além de criar esquemas de validação com bibliotecas como yup e zod.
