IA Cheatsheets

¡Excelente elección! React Hook Form es una librería fantástica para la gestión de formularios en React, conocida por su rendimiento y facilidad de uso. Aquí tienes un “cheatsheet” completo y detallado, optimizado para ser claro y conciso para una IA conversacional.

📝 React Hook Form Cheatsheet Completo 📝

React Hook Form es una librería de alto rendimiento para la validación de formularios con React, que minimiza los re-renders y simplifica la gestión del estado del formulario, utilizando hooks no controlados (uncontrolled components) por defecto.

1. 🌟 Conceptos Clave

2. 🛠️ Configuración Inicial

  1. Instalación: 
    npm install react-hook-form
# o
yarn add react-hook-form
  2. Instalación de Resolvers (Opcional, para validación externa): 
    npm install @hookform/resolvers @hookform/resolvers/zod zod # Ejemplo con Zod
# o
npm install @hookform/resolvers @hookform/resolvers/yup yup # Ejemplo con Yup

3. 🎯 El Hook Principal: useForm()

Este es el hook central que proporciona toda la funcionalidad necesaria para tu formulario.

Sintaxis Básica:

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

function MyForm() {
  const {
    register,         // Función para registrar inputs
    handleSubmit,     // Función para envolver tu manejador de envío
    formState: {     // Objeto que contiene el estado del formulario (errores, isDirty, isValid, etc.)
      errors,         // Objeto con los errores de validación
      isDirty,        // true si el formulario ha sido modificado
      isValid,        // true si el formulario es válido (cumple con las reglas de validación)
      isSubmitting,   // true mientras el formulario se está enviando
      isSubmitted,    // true después del primer envío
      submitCount,    // Número de veces que el formulario ha sido enviado
    },
    watch,            // Función para observar valores de input
    setValue,         // Función para actualizar valores de input programáticamente
    getValues,        // Función para obtener todos los valores del formulario
    reset,            // Función para resetear el formulario
    control,          // Objeto para usar con componentes controlados (ej. con Controller)
  } = useForm({
    // Opciones de configuración
    defaultValues: {},   // Valores por defecto del formulario
    resolver: undefined, // Resolver para validación con librerías externas
    mode: 'onSubmit',    // Cuándo activar la validación ('onChange', 'onBlur', 'onSubmit', 'onTouched', 'all')
    reValidateMode: 'onChange', // Cuándo revalidar después de un error
    criteriaMode: 'firstError', // 'firstError' o 'all' para errores de validación
  });

  // ... lógica del formulario
}

Opciones Comunes de useForm

4. 📝 Registrando Inputs con register()

register() es la función clave para vincular los inputs de tu formulario con React Hook Form.

Sintaxis Básica:

<input {...register("nombreDelCampo")} />

Con Reglas de Validación Incorporadas:

Puedes pasar un segundo argumento a register con un objeto de reglas de validación.

5. ❌ Manejo de Errores (formState.errors)

El objeto errors te permite acceder a los mensajes de error para cada campo.

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) =&gt; console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", { required: "Usuario es obligatorio" })}
        placeholder="Usuario"
      />
      {errors.username && <p style={{ color: 'red' }}>{errors.username.message}</p>}

      <input
        type="password"
        {...register("password", { minLength: { value: 6, message: "Contraseña debe tener al menos 6 caracteres" } })}
        placeholder="Contraseña"
      />
      {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}

      <button type="submit">Iniciar Sesión</button>
    </form>
  );
}

6. 🚀 Envío del Formulario (handleSubmit())

handleSubmit es la función que envuelve tu función de envío real. Se encarga de la validación antes de ejecutar tu lógica.

// Dentro de tu componente de formulario:
const { handleSubmit } = useForm();

// 1. Función que se ejecuta si la validación es exitosa
const onSubmit = (data) =&gt; {
  console.log("Datos enviados:", data);
  // Aquí llamarías a tu API
};

// 2. (Opcional) Función que se ejecuta si la validación falla
const onError = (errors, e) =&gt; {
  console.log("Errores de validación:", errors);
  // Aquí podrías hacer scroll a los campos con error, etc.
};

return (
  // Puedes pasar solo el onSubmit
  <form onSubmit={handleSubmit(onSubmit)}>
    {/* ... inputs */}
    <button type="submit">Enviar</button>
  </form>

  // O pasar también un callback de error
  // <form onSubmit={handleSubmit(onSubmit, onError)}>
  //   {/* ... inputs */}
  //   <button type="submit">Enviar</button>
  // </form>
);

7. 🔄 Actualización y Observación de Valores

8. 🏗️ Formularios con Componentes Controlados (Controller / useController)

Por defecto, React Hook Form funciona mejor con componentes no controlados (usando la ref del register). Sin embargo, muchos componentes de UI (Material UI, Ant Design, etc.) son componentes controlados que requieren las props value y onChange.

Controller Component (Recomendado para componentes de UI)

import { useForm, Controller } from 'react-hook-form';
import { TextField, Button } from '@mui/material'; // Ejemplo con Material UI

function ControlledForm() {
  const { handleSubmit, control, formState: { errors } } = useForm({
    defaultValues: {
      email: ''
    }
  });

  const onSubmit = (data) =&gt; console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="email"
        control={control}
        rules={{ required: 'Email es obligatorio' }} // Reglas de validación aquí
        render={({ field }) =&gt; ( // `field` contiene props { onChange, onBlur, value, name, ref }
          <TextField
            {...field} // Pasa todas las props de `field` al componente
            label="Email"
            variant="outlined"
            error={!!errors.email}
            helperText={errors.email ? errors.email.message : ''}
          />
        )}
      />
      <Button type="submit">Enviar</Button>
    </form>
  );
}

useController Hook (Para control más granular o componentes personalizados)

import { useForm, useController } from 'react-hook-form';
import { Slider } from '@mui/material'; // Ejemplo con un Slider

function MySliderInput({ control, name }) {
  const {
    field: { value, onChange, ...restField },
    fieldState: { error },
  } = useController({
    name,
    control,
    rules: { required: 'Slider es obligatorio', min: 10 },
    defaultValue: 0,
  });

  return (
    &lt;>
      <Slider
        value={value}
        onChange={onChange}
        {...restField}
        // Puedes añadir más props aquí si es necesario
      />
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
    </>
  );
}

function ParentForm() {
  const { handleSubmit, control } = useForm();
  const onSubmit = (data) =&gt; console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <MySliderInput name="volume" control={control} />
      <button type="submit">Enviar</button>
    </form>
  );
}

9. 🗑️ Resetear Formulario (reset())

10. 🎯 Otros Hooks Útiles

11. ⚙️ DevTools (Opcional)

12. 💡 Buenas Prácticas y Consejos

Este cheatsheet debería proporcionarte una referencia completa y eficaz para trabajar con React Hook Form, permitiéndote construir formularios robustos y de alto rendimiento.