Melhore formulários React com React Hook Form

React Hook form é uma biblioteca que auxilia na padronização dos formulários e validações simples que já são encontradas no HTML, entretanto, a biblioteca faz uso de entradas sem a dependência de estados. Consequentemente, melhora o número de renderizações tornando os formulários extremamente eficientes.

Instalação

npm install react-hook-form

yarn add react-hook-form

Primeiros passos com React Hook Form

É nescessario importar o useForm :

import { useForm } from "react-hook-form";

Na documentação do React Hook Form podem ser encontrados:

Clique aqui para visualizar a fonte do conteúdo a seguir

Register: Responsável por registrar o valor do input e atribuir ao seu hook form.
formState: Salva o estado do input do formulário, muito usado para retornar os erros de validação, por exemplo.
watch: Quando declarado e atribuído para um input, retorna apenas o valor do input esperado.
handleSubmit: É o método responsável por manipular ou lidar com o submit do form.
reset: Responsável por apagar ou resetar o state do hook form.
useController: É um hook que funciona de forma similar a Controller, por meio do qual é possível passar as props diretamente para os campos do formulário, conforme o exemplo da documentação:

Codigo de demonstração

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <select {...register("gender")}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}

Console ao enviar formulario:

imagem console log

Validação de Erro

precisamos extrair a funcionalidade chamada errors:

const { register, handleSubmit, formState: { errors } } = useForm();

Codigo de demostração

import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", {
          required: true,
          minLength: 2,
          maxLength: 10,
        })}
      />
      {errors?.firstName?.type === "required" && <p>Campo não pode ser nulo</p>}
      {errors?.firstName?.type === "minLength" && <p>Campo deve ser maior que 2</p>}
      {errors?.firstName?.type === "maxLength" && <p>Campo deve ser menor que 10</p>}
      <select {...register("gender")}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}