Validar Formulários em React de Forma Simples e Eficiente!

Recentemente, eu tive uma grande experiência aprendendo a validar formulários em React. Como desenvolvedor, estava habituado a validar formulário no Angular, extremamente simples e nativa, porém acabei sentindo falta dessa simplicidade no React.

No entanto, eu descobri duas ótimas libs para validar formulários

Eu utilizei a biblioteca Yup.js para fazer a validação dos meus formulários. O Yup.js é uma biblioteca de validação de schema que permite definir esquemas de validação simples e altamente flexíveis.

const schema = yup.object().shape({
  name: yup.string().required("Nome é obrigatório"),
  email: yup.string().email().required("Email é obrigatório"),
  phone: yup.string().test("is-phone", "Telefone inválido", (value) => {
    return validatePhone(value as string) || !value;
  }),
  active: yup.boolean().required("Ativo é obrigatório"),
  admin: yup.boolean().required("Admin é obrigatório"),
});

Utilizei também o react-hook-form que é uma biblioteca de gerenciamento de estado de formulários que oferece uma abordagem mais simples e fácil de usar do que outras bibliotecas existentes, como o Formik. O Hook Form é baseado nos Hooks do React, permitindo que criem formulários reativos, escaláveis e de alto desempenho com menos código e menos complexidade.

Por fim, eu utilizei a biblioteca ChakraUI para criar os meus formulários de forma rápida e responsiva.