0Pricing
React Academy · Lección

Primeros pasos con React Hook Form

Instale RHF, invoque useForm, registre las entradas y gestione el envío del formulario.

Primeros pasos con React Hook Form es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección instalará React Hook Form, llamará a useForm, registrará entradas y gestionará el envío de formularios sin administrar variables de estado individuales.

¿Por qué React Hook Form?

Los formularios controlados tradicionales de React requieren un useState por campo y un onChange por entrada. React Hook Form (RHF) gestiona todo esto internamente mediante entradas no controladas, lo que le proporciona una API más sencilla y menos renderizados.

Instalación

Instale el paquete. No se necesitan dependencias peer adicionales para el uso básico.
npm install react-hook-form

Hook useForm

Llame a useForm() para obtener la función register, el envoltorio handleSubmit y formState. Estas son las tres piezas fundamentales que necesita para cualquier formulario.
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>
  );
}

Registro de entradas

Aplique el resultado de register('fieldName') a cada entrada mediante el operador spread. RHF asocia internamente una referencia y controladores de eventos a la entrada; no se necesitan value ni onChange.
<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

La función de retorno de llamada onSubmit

handleSubmit valida todos los campos y llama a su función de retorno de llamada onSubmit con un objeto de datos tipado únicamente cuando el formulario es válido. Si la validación falla, rellena formState.errors en su lugar.
const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Valores predeterminados

Pase `defaultValues` a useForm para rellenar previamente los campos del formulario. Esto resulta útil en formularios de edición en los que carga datos existentes.
const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Propiedades de formState

formState expone valores booleanos útiles: `isSubmitting` (true mientras se ejecuta handleSubmit), `isDirty` (true si algún campo ha cambiado), `isValid` (true si no hay errores) y el objeto `errors`.
const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Restablecimiento del formulario

Llame a `reset()` para borrar todos los campos y restablecer formState. Opcionalmente, pase nuevos valores predeterminados.
const { reset } = useForm();

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

Ventaja de rendimiento

Como RHF utiliza entradas no controladas, el formulario no se vuelve a renderizar con cada pulsación de tecla, a diferencia de los formularios controlados de React. Solo los errores de validación y el estado del envío provocan nuevos renderizados, por lo que los formularios grandes responden con fluidez.

Comprobación rápida

¿Qué hace handleSubmit(onSubmit) cuando el usuario envía el formulario?

Resumen

Instale RHF, llame a useForm para obtener register y handleSubmit, aplique register() a las entradas mediante el operador spread y envuelva su controlador de envío con handleSubmit. Establezca defaultValues para los formularios de edición y llame a reset() después de un envío correcto.

A continuación

Siguiente lección: **Reglas de validación y mensajes de error** — aplicará reglas de validación integradas y mostrará mensajes de error a los usuarios.

Preguntas frecuentes

¿La lección «Primeros pasos con React Hook Form» es gratis?

Sí — el texto completo de «Primeros pasos con React Hook Form» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Primeros pasos con React Hook Form»?

Instale RHF, invoque useForm, registre las entradas y gestione el envío del formulario. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Primeros pasos con React Hook Form»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Primeros pasos con React Hook Form
  2. Reglas de validación y mensajes de error
  3. Validación de esquemas con Zod
  4. Campos dinámicos con useFieldArray
← Volver a React Academy