React Hook Form es más fácil que Formik

En mi canal tengo un video donde te muestro cómo usar React Hook Form. 📺

Si has trabajado con formularios en React, probablemente conoces Formik. Durante años fue la librería más popular para manejar formularios. Pero en mi experiencia, React Hook Form es más fácil de usar, más ligera y tiene mejor rendimiento.

¿Por qué React Hook Form?

Estas son las razones principales por las que prefiero React Hook Form:

Menos código: No necesitas envolver todo en componentes especiales
Mejor rendimiento: Usa refs internamente, no re-renderiza todo el formulario
Más ligera: ~8KB vs ~12KB de Formik
API más intuitiva: El hook useForm es súper simple

Instalación

bash

npm install react-hook-form

Eso es todo. No necesitas dependencias adicionales.

🎬 ¿Te está gustando este contenido? Tenemos más tutoriales en video en nuestro canal de YouTube. ¡Suscríbete para no perderte ninguno!

Uso básico

Aquí está un formulario simple con React Hook Form:

jsx

import { useForm } from "react-hook-form";export default function ContactForm() {  const { register, handleSubmit, formState: { errors } } = useForm();  const onSubmit = (data) => {    console.log(data);    // { nombre: "...", email: "..." }  };  return (    <form onSubmit={handleSubmit(onSubmit)}>      <input        {...register("nombre", { required: "El nombre es requerido" })}        placeholder="Tu nombre"      />      {errors.nombre && <span>{errors.nombre.message}</span>}      <input        {...register("email", {          required: "El email es requerido",          pattern: {            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,            message: "Email inválido"          }        })}        placeholder="tu@email.com"      />      {errors.email && <span>{errors.email.message}</span>}      <button type="submit">Enviar</button>    </form>  );}

Comparación con Formik

En Formik necesitarías algo así:

jsx

import { Formik, Form, Field, ErrorMessage } from "formik";import * as Yup from "yup"; // Otra dependencia másconst validationSchema = Yup.object({  nombre: Yup.string().required("El nombre es requerido"),  email: Yup.string().email("Email inválido").required("El email es requerido"),});export default function ContactForm() {  return (    <Formik      initialValues={{ nombre: "", email: "" }}      validationSchema={validationSchema}      onSubmit={(values) => console.log(values)}    >      <Form>        <Field name="nombre" placeholder="Tu nombre" />        <ErrorMessage name="nombre" component="span" />        <Field name="email" placeholder="tu@email.com" />        <ErrorMessage name="email" component="span" />        <button type="submit">Enviar</button>      </Form>    </Formik>  );}

¿Ves la diferencia? Con Formik necesitas:

Importar múltiples componentes (Formik, Form, Field, ErrorMessage)
Instalar y configurar Yup para validación
Envolver todo en el componente <Formik>
Definir initialValues por separado

Con React Hook Form:

Solo importas useForm
La validación viene integrada
Usas inputs HTML normales con register
Todo es más declarativo

Validación avanzada

React Hook Form soporta validación nativa muy poderosa:

jsx

<input  {...register("password", {    required: "La contraseña es requerida",    minLength: {      value: 8,      message: "Mínimo 8 caracteres"    },    pattern: {      value: /^(?=.*[A-Za-z])(?=.*\d)/,      message: "Debe contener letras y números"    }  })}  type="password"/>

Si necesitas validación más compleja, también puedes integrar Zod:

bash

npm install @hookform/resolvers zod

jsx

import { useForm } from "react-hook-form";import { zodResolver } from "@hookform/resolvers/zod";import { z } from "zod";const schema = z.object({  email: z.string().email("Email inválido"),  password: z.string().min(8, "Mínimo 8 caracteres"),});function Form() {  const { register, handleSubmit, formState: { errors } } = useForm({    resolver: zodResolver(schema),  });  // ...}

Valores por defecto

jsx

const { register, handleSubmit } = useForm({  defaultValues: {    nombre: "Héctor",    email: "hector@fixter.org",  }});

Estado del formulario

El hook te da acceso a todo el estado:

jsx

const {  register,  handleSubmit,  formState: {    errors,      // Errores de validación    isSubmitting, // ¿Está enviando?    isDirty,      // ¿Cambió algo?    isValid,      // ¿Es válido?  },  reset,         // Reiniciar formulario  watch,         // Observar valores  setValue,      // Establecer valor programáticamente} = useForm();

Conclusión

React Hook Form es mi recomendación para cualquier proyecto nuevo con React. Es más simple, más rápido y tiene una mejor experiencia de desarrollo.

Si ya usas Formik y funciona bien para ti, no hay necesidad de migrar. Pero si estás empezando un proyecto nuevo o quieres simplificar tus formularios, dale una oportunidad a React Hook Form.

La documentación oficial es excelente y tiene muchos más ejemplos.

Abrazo. bliss.

React Hook Form es más fácil que Formik

Héctorbliss

Mira el video:

¿Por qué React Hook Form?

Instalación

Uso básico

Comparación con Formik

Validación avanzada

Valores por defecto

Estado del formulario

Conclusión

Fabric.js para manipular y generar imágenes con canvas

Checa este otro Post

useDarkMode Hook con Tailwind CSS

Checa este otro Post

Animaciones web con React + Motion 🧙🏻