React Hook Form

Para controle de formulários, utilizamos a biblioteca react-hook-form, que nos oferece um hook com várias opções para controle de campos de formulários, com foco em performance e facilidade de desenvolvimento.

Utilizações

Para usarmos a biblioteca, desestruturamos alguns valores retornados pelo hook:

Propriedade	Descrição
register	Função necessária de ser passada para cada campo de formulário que desejarmos usar. Veja a utilização com explicação no exemplo abaixo
formState	Propriedade que contém informações interessantes de obter, como erros de validação.
watch	Propriedade que 'observa' um campo desejado ou todo o formulário. Pode ser utilizado para fazer debug.
handleSubmit	Função necessária para validação do formulário. Encapsula uma função que desejarmos e que será chamada apenas se todos os valores forem válidos.
reset	Função utilizada para redefinir todos os valores do formulário. Se não for passado um objeto com os valores padrão, irá redefinir para os valores padrão especificadas pelo HTML5
resetField	Função que recebe como string o nome de um campo, utilizada para redefinir apenas o campo com nome passado.
setError	Função utilizada para definir um erro no campo com o nome passado. Recebe um nome de campo, um objeto Error que define o tipo e uma mensagem, e opcionalmente um objeto com propriedade booleana 'shouldFocus', definindo se deve ser focada ou não.
setValue	Função que define um valor para um campo desejado. Recebe o nome do campo desejado e um valor para definir.
getValues	Função que retorna todo o formulário, ou um campo específico caso nenhum nome seja passado. Tem o mesmo uso do watch, mas não causa re-renderizações, sendo mais otimizado.
control	Objeto que deve ser passado a um componente 'Control', caso tenha algum.

pagina-exemplo/index.tsx

// Importamos o hook
import { useForm } from 'react-hook-form';
function PaginaExemplo() {
    // Pegamos aqui os valores desejados
    const { 
        register,
        handleSubmit,
        formState: { errors }, // Desestruturando assim, temos acesso fácil
                               // aos erros de validação
     } = useForm({
        // Opções
        defaultValues: { // Aqui passamos todos os valores padrão que desejamos
            name: "",
            num: 0
        }
     });
    return (
        { ... }
            <input
            /* Para controlarmos um componente com o hook, fazemos um spread na
            função register, passando primeiro o nome do campo,
            e em seguida as opções
            */
                {...register(
                "name", 
                {
                    // Se for um campo obrigatório, passamos nesta propriedade 
                    // a mensagem de erro que deve ser mostrada.
                    required: "Preencha o campo."
                })}
            >
            // Exibimos a mensagem de erro, caso tenha uma
            {errors.name && errors.name?.message}
            <input
            /* Para controlarmos um componente com o hook, fazemos um spread na
            função register, passando primeiro o nome do campo,
            e em seguida as opções
            */
                type="number"
                {...register(
                "name", 
                {
                    // Se for um campo obrigatório, passamos nesta propriedade 
                    // a mensagem de erro que deve ser mostrada.
                    required: "Preencha o campo."
                })}
            >
        { ... }
    )
}