React 19 Server Actions con Zod: Menos código de ejemplo para FormData

React 19, Server Actions y useActionState transforman la forma en que se construyen los formularios. Para muchas pantallas puedes seguir utilizando formularios HTML nativos y controladores en el servidor, en lugar de recurrir a una gran biblioteca de formularios del cliente para cada caso.

Después de varias migraciones a esa tecnología, esas mismas dos líneas seguían apareciendo en casi todas las acciones:

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);if (!result.success) {
  return {
    errors: result.error.flatten().fieldErrors,
  };
}

Las pantallas de inicio de sesión, los flujos de registro, las páginas de contacto y los editores de perfil todos utilizaban el mismo patrón: convertir FormData en un objeto, ejecutar Zod, manejar los errores de los campos y luego continuar. Esa repetición es precisamente a lo que se dirige zod-form-action: una pequeña herramienta para combinar Zod con React 19 Server Actions.

¿Qué cambió en React 19?

useActionState facilita el seguimiento del estado de envío sin tener que manejar manualmente varios estados del cliente.

En lugar de conectar onSubmit, indicadores de carga y validaciones en el navegador para cada formulario, el formulario puede enviar los datos directamente a una acción del servidor.

Ese enfoque tiende a generar:

• Un rendimiento percibido mejor en flujos simples
• Código de acción más sencillo
• Mejora progresiva cuando el paquete del cliente es lento o está faltando
• Una separación más clara entre el trabajo de la interfaz y el del servidor

Para muchas aplicaciones, este enfoque nativo es muy adecuado.

El problema con la validación de formularios

Las acciones del servidor reciben una instancia de FormData.

Antes de que Zod pueda realizar la validación, la mayoría de los procesadores convierten esa instancia en un objeto simple.

const data = Object.fromEntries(formData);

const result = schema.safeParse(data);

El enfoque en sí es bueno.

El problema radica en que cada manejador sigue la misma lista de verificación:

• Convertir FormData en un objeto simple
• Ejecutar el esquema de Zod
• Dar formato a los mensajes de error a nivel de campo
• Devolver los valores tipados en caso de éxito
• Proceder con el código del dominio

Cuando esa lista de verificación aparece en docenas de formularios, el trabajo repetitivo ocupa espacio que debería destinarse a la lógica real.

Presentamos zod-form-action

zod-form-action existe para reducir esa capa repetitiva.

En lugar de volver a implementar las funciones de análisis y validación en cada acción del servidor, el manejador puede concentrarse en el comportamiento del dominio.

El paquete presupone que ya se está utilizando la siguiente pila tecnológica:

• React 19
• useActionState
• Next.js Server Actions (u otro host de Server Actions)
• Zod
• TypeScript

El objetivo es concreto: mantener la validación de formularios en el lado del servidor consistente y fácil de reutilizar.

Existe un entorno de pruebas en tiempo real disponible a través de esta demostración de CodeSandbox.

¿Por qué no usar simplemente React Hook Form?

Esa pregunta se plantea con frecuencia, y la respuesta no es despectiva.

React Hook Form sigue siendo una biblioteca excelente.

Sigue siendo una opción sólida para:

• Formularios dinámicos
• Validación en el lado del cliente
• Flujos interactivos complejos
• Arreglos de campos
• Asistentes multi-paso

No todos los formularios necesitan esa complejidad.

Cuando un proyecto ya sigue el flujo de trabajo nativo de formularios de React 19 con Server Actions, un auxiliar ligero de Zod en el servidor puede ser una mejor opción que un motor completo de formularios en el cliente.

Estas dos herramientas abordan problemas diferentes en lugar de competir directamente.

Ventajas de usar zod-form-action

Los equipos suelen adoptarlo para:

• Dejar de volver a escribir la conversión de FormData
• Alinear el comportamiento de validación en todas las acciones
• Obtener tipos más claros en TypeScript tras un análisis exitoso
• Informar sobre errores de campos en un formato estándar
• Integrarse perfectamente con las acciones del servidor de React 19
• Mantener cada acción centrada en las reglas del dominio

Casos de uso en el mundo real

Se adapta perfectamente a las pantallas cotidianas:

• Inicio de sesión
• Registro
• Contacto
• Inscripción al boletín informativo
• Edición de perfiles
• Ajustes de cuenta
• Campos del panel de control
• Formularios CRUD para administradores

Esos flujos suelen requerir verificaciones simples y repetidas en lugar de gráficos de campos altamente dinámicos.

Por qué extraer el patrón

Los bloques de validación casi idénticos solían aparecer en cada códigobase migrado.

Copiarlos indefinidamente resulta frágil; trasladar los pasos compartidos a un paquete reutilizable mantiene los proyectos alineados y permite que otros mejoren la herramienta auxiliar.

Publicar ese paquete fomenta los comentarios, los informes de errores y las contribuciones en lugar de encerrar el patrón en un repositorio privado.

La seguridad de tipos es importante

La fortaleza de Zod radica en las comprobaciones en tiempo de ejecución combinadas con tipos sólidos de TypeScript.

En lugar de tratar cada valor de FormData como desconocido para siempre, la acción puede trabajar con datos que ya han sido validados y tipificados.

Eso generalmente significa:

• Mejor autocompletado en el camino de éxito
• Menos sorpresas en tiempo de ejecución
• Manejadores más limpios
• Mantenimiento a largo plazo más sencillo

Rendimiento

Dado que la validación se realiza en el servidor, el paquete del cliente puede seguir siendo más pequeño.

Para las aplicaciones que ya están comprometidas con Server Actions, esto coincide con la preferencia de React 19 por trasladar el trabajo al servidor cuando es útil.

¿Qué viene después?

El trabajo en curso en zod-form-action se centra en la experiencia del desarrollador.

Las áreas que se están explorando incluyen:

• Inferencia más sólida de TypeScript
• Ayudas adicionales para validación
• Más ejemplos
• Integraciones más amplias con frameworks
• Documentación más clara

Los comentarios de quienes utilizan el paquete guiarán esas versiones futuras.

Preguntas frecuentes

¿Puedo usar React Hook Form con React 19?

Sí. React Hook Form sigue siendo una opción sólida, especialmente cuando los formularios necesitan una interactividad avanzada en el lado del cliente.

¿Reemplaza React 19 a React Hook Form?

No. React 19 agrega APIs y patrones; no elimina las bibliotecas de formularios ya existentes. Elija según la complejidad del formulario y dónde debe realizarse la validación.

¿Por qué usar Zod para la validación?

Zod valida en tiempo de ejecución y mantiene los tipos de TypeScript alineados con dicha validación, de modo que los datos inválidos fallen temprano mientras que los válidos permanecen tipados.

¿Está zod-form-action solo para Next.js?

No. Cualquier aplicación de React 19 que utilice Server Actions y Zod puede beneficiarse potencialmente, dependiendo de cómo esté estructurada la arquitectura.

Consideraciones finales

React 19 impulsa a los equipos hacia una construcción de formularios más sencilla.

Los formularios HTML nativos, useActionState, Server Actions y Zod juntos pueden mantener la validación sólida y tipada sin necesidad de adoptar siempre un amplio conjunto de herramientas para formularios en el cliente.

Cuando el mismo bloque de análisis y validación de FormData aparece en muchas acciones, extraer ese patrón en una función auxiliar reutilizable facilita el mantenimiento del código.

zod-form-action fue creado con ese objetivo en mente.

Instálalo desde la página del paquete en npm.