React Academy · Aula

Primeiros passos com React Hook Form

Instale RHF, chame useForm, registre entradas e trate o envio do formulário.

Primeiros passos com React Hook Form é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você instalará o React Hook Form, chamará useForm, registrará campos de entrada e lidará com envios de formulários sem gerenciar variáveis de estado individuais.

Por que usar o React Hook Form?

Formulários controlados tradicionais no React exigem um useState por campo e um onChange por entrada. O React Hook Form (RHF) gerencia tudo isso internamente usando campos de entrada não controlados, oferecendo uma API mais simples e menos renderizações novamente.

Instalação

Instale o pacote. Nenhuma dependência adicional de pares é necessária para o uso básico.

npm install react-hook-form

Gancho useForm

Chame useForm() para obter a função register, o invólucro handleSubmit e formState. Essas são as três partes essenciais de que você precisa em qualquer formulário.

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Registrando campos de entrada

Distribua o resultado de register('fieldName') em cada campo de entrada. O RHF associa uma referência e manipuladores de eventos ao campo de entrada internamente — não é necessário usar value nem onChange.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

A função de retorno onSubmit

handleSubmit valida todos os campos e chama sua função de retorno onSubmit com um objeto de dados tipado somente quando o formulário é válido. Se a validação falhar, ele preencherá formState.errors em vez disso.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Valores padrão

Passe `defaultValues` para useForm para preencher previamente os campos do formulário. Isso é útil em formulários de edição nos quais você carrega dados existentes.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Propriedades de formState

formState expõe valores booleanos úteis: `isSubmitting` (true enquanto handleSubmit é executado), `isDirty` (true se algum campo tiver sido alterado), `isValid` (true se não houver erros) e o objeto `errors`.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Redefinindo o formulário

Chame `reset()` para limpar todos os campos e redefinir formState. Opcionalmente, passe novos valores padrão.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Vantagem de desempenho

Como o RHF usa campos de entrada não controlados, o formulário não é renderizado novamente a cada tecla digitada — ao contrário dos formulários controlados do React. Somente os erros de validação e o estado do envio causam novas renderizações, tornando os formulários grandes ágeis.

Verificação rápida

O que chamar handleSubmit(onSubmit) faz quando o usuário envia o formulário?

Recapitulação

Instale o RHF, chame useForm para obter register e handleSubmit, distribua register() nos campos de entrada e envolva seu manipulador de envio com handleSubmit. Defina defaultValues para formulários de edição e chame reset() após um envio bem-sucedido.

A seguir

Próxima lição: **Regras de validação e mensagens de erro** — você aplicará regras de validação integradas e exibirá mensagens de erro aos usuários.

Perguntas Frequentes

A aula “Primeiros passos com React Hook Form” é grátis?

Sim — o texto completo de “Primeiros passos com React Hook Form” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Primeiros passos com React Hook Form”?

Instale RHF, chame useForm, registre entradas e trate o envio do formulário. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Primeiros passos com React Hook Form”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para React Academy