Form Management Skill

Patrones Clave

1. Schema Zod Primero

const schema = z.object({
  email: z.string().email('Email inválido'),
  password: z.string().min(8, 'Mínimo 8 caracteres')
});

2. Hook + Form Hook

const { register, handleSubmit, formState: { errors, isLoading } } = useForm({
  resolver: zodResolver(schema),
  defaultValues: { email: '', password: '' }
});

3. Manejo de Errores

{errors.email && (
  <span className="text-red-500">{errors.email.message}</span>
)}

4. Estados Correctos

<button disabled={isLoading} type="submit">
  {isLoading ? 'Enviando...' : 'Enviar'}
</button>

Best Practices

1. Schema siempre primero: Define Zod schema antes de usar en formulario
2. TypeScript types: Infiere tipos del schema con z.infer<typeof schema>
3. Error messages claros: Mensajes en español y específicos
4. Loading state: Siempre muestra estado durante envío
5. Memoización: useCallback para handlers pasados a children
6. No hardcodear valores: Todos los campos dinámicos
7. Reset después de envío: reset() en success
8. Validación en tiempo real: Modo onChange si es necesario

Anti-Patterns

❌ Validación manual en handlers (usa Zod) ❌ Props sin tipado de Zod ❌ Handlers sin useCallback ❌ Errores genéricos ("Error") ❌ Formularios sin loading state ❌ type="button" en submit (siempre type="submit") ❌ Estilos inline (usa TailwindCSS)

Dependencias

• react-hook-form (^7.71.0)
• zod (^4.3.0)
• @hookform/resolvers (para zodResolver)

Ejemplos

Ver examples.md

Referencias

• React Hook Form Docs
• Zod Validation
• conventions.md para patrones del proyecto