Formularios Avanzados en React

Cuando hablamos de formularios en React, estamos en un punto donde necesitamos:

• Capturar inputs de los usuarios.
• Validar que los datos sean correctos.
• Mostrar errores de manera bonita y clara.
• Controlar el envío (submit) de la información.

¿Por qué son un desafío en React?

En React, cada input puede tener su propio estado local (value, onChange...), y coordinar muchos inputs en un formulario puede volverse muy complejo y verboso si lo haces a mano.
Además, validar campos (por ejemplo: que un email esté bien escrito) requiere lógica extra que puede ensuciar tu código.

¿Qué es react-hook-form?

react-hook-form es una librería ligera y súper popular para manejar formularios en React de manera:

• Simple
• Eficiente (minimiza re-renderizados)
• Escalable (ideal para formularios grandes)

Su idea principal:
✅ Declaras tu formulario.
✅ Conectas tus inputs con "hooks" (register).
✅ Validas y manejas errores fácil.

¿Cómo funciona react-hook-form?

Te muestra una forma mucho más declarativa y limpia de trabajar.

Mira este ejemplo sencillo:

import { useForm } from "react-hook-form";
function MiFormulario() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {" "}
      <input
        {...register("nombre", { required: "El nombre es obligatorio" })}
        placeholder="Nombre"
      />{" "}
      {errors.nombre && <span>{errors.nombre.message}</span>}{" "}
      <input
        {...register("email", {
          required: "El email es obligatorio",
          pattern: { value: /^\S+@\S+$/i, message: "Formato inválido" },
        })}
        placeholder="Email"
      />{" "}
      {errors.email && <span>{errors.email.message}</span>}{" "}
      <button type="submit">Enviar</button>{" "}
    </form>
  );
}

¿Qué pasa aquí?

• useForm() es el hook que inicializa todo.
• register("campo") conecta el input al formulario.
• handleSubmit(onSubmit) maneja el envío del form.
• errors contiene los errores de validación.

Ventajas de react-hook-form

¿Y la validación más avanzada?

Puedes usar:

• Validaciones propias en register.
• Validaciones con librerías como yup, zod, etc.

Por ejemplo, usando yup (esquema de validación):

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const schema = yup.object({
  nombre: yup.string().required("Nombre requerido"),
  email: yup.string().email("Email inválido").required("Email requerido"),
});
function FormularioAvanzado() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ resolver: yupResolver(schema) });
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {" "}
      <input {...register("nombre")} placeholder="Nombre" />{" "}
      {errors.nombre && <span>{errors.nombre.message}</span>}{" "}
      <input {...register("email")} placeholder="Email" />{" "}
      {errors.email && <span>{errors.email.message}</span>}{" "}
      <button type="submit">Enviar</button>{" "}
    </form>
  );
}

Resumen Final:

✅ Formularios avanzados requieren buen manejo de estado, errores y validación.
✅ react-hook-form te permite hacerlo limpio, rápido y modular.
✅ Puedes escalarlo fácilmente a formularios grandes y complejos.
✅ Si quieres validaciones aún más profesionales, combínalo con yup o zod.