1 de septiembre de 2025Español

Explora el hook useFormState de React para una validación y gestión del estado de formularios robusta. Aprende a crear formularios accesibles y fáciles de usar con ejemplos del mundo real.

Validación con useFormState de React: Una Guía Completa para una Gestión Mejorada del Estado de Formularios

Los formularios son la piedra angular de la interacción del usuario en la web. Son la puerta de entrada para recopilar datos, obtener retroalimentación y permitir a los usuarios realizar tareas esenciales. Sin embargo, construir formularios robustos, accesibles y fáciles de usar puede ser una tarea desafiante. React, con su arquitectura basada en componentes, ofrece herramientas poderosas para el desarrollo de formularios, y el hook useFormState cambia las reglas del juego al simplificar la gestión del estado y la validación de los formularios.

Esta guía completa profundiza en las complejidades del hook useFormState de React, proporcionándote el conocimiento y los ejemplos prácticos para construir formularios excepcionales que mejoran la experiencia del usuario y la integridad de los datos. Exploraremos la funcionalidad principal del hook, estrategias de validación, consideraciones de accesibilidad y mejores prácticas.

¿Qué es useFormState de React?

El hook useFormState, típicamente proporcionado por librerías de gestión de formularios como @mantine/form, react-hook-form (con extensiones de gestión de estado), o una implementación personalizada, ofrece una forma optimizada de gestionar el estado del formulario, manejar los cambios en los inputs, realizar validaciones y enviar los datos del formulario. Simplifica el proceso, a menudo complejo, de gestionar manualmente el estado del formulario usando useState y manejando varios eventos.

A diferencia de los enfoques tradicionales que requieren que gestiones el estado de cada campo de entrada individualmente, useFormState centraliza el estado del formulario en un solo objeto, lo que facilita el seguimiento de los cambios, la aplicación de reglas de validación y la actualización de la interfaz de usuario en consecuencia. Este enfoque centralizado promueve un código más limpio y mantenible.

Beneficios de Usar useFormState

Gestión de Estado Simplificada: El estado centralizado del formulario reduce el código repetitivo y mejora la legibilidad del código.
Validación Declarativa: Define reglas de validación de forma declarativa, haciéndolas más fáciles de entender y mantener.
Experiencia de Usuario Mejorada: Proporciona retroalimentación en tiempo real a los usuarios a través de validación inmediata y mensajes de error.
Accesibilidad: Mejora la accesibilidad del formulario proporcionando mensajes de error claros y concisos y adhiriéndose a los estándares ARIA.
Reducción de Código Repetitivo: Minimiza la cantidad de código repetitivo necesario para el manejo de formularios.
Rendimiento Mejorado: Actualizaciones de estado y re-renderizaciones optimizadas para un mejor rendimiento.

Conceptos Clave de useFormState

Desglosemos los conceptos clave de cómo funciona típicamente useFormState (usando una implementación genérica como ejemplo, ya que las implementaciones de librerías específicas pueden variar ligeramente):

Inicialización: Inicializa el hook con un objeto de estado inicial que representa los campos del formulario. Este objeto puede contener valores predeterminados para los inputs del formulario.
Manejo de Entradas: Utiliza las funciones proporcionadas por el hook para manejar los cambios en los inputs. Estas funciones típicamente actualizan el campo correspondiente en el objeto de estado del formulario.
Validación: Define reglas de validación para cada campo. Estas reglas pueden ser funciones simples que verifican campos obligatorios o funciones más complejas que realizan lógicas de validación personalizadas.
Manejo de Errores: El hook gestiona un objeto de errores que almacena los errores de validación para cada campo. Muestra estos errores al usuario para proporcionar retroalimentación sobre las entradas inválidas.
Envío: Utiliza el manejador de envío del hook para procesar los datos del formulario cuando el usuario lo envía. Este manejador puede realizar acciones como enviar los datos a un servidor o actualizar el estado de la aplicación.

Ejemplos Prácticos: Creando Formularios con useFormState

Ilustremos el uso de useFormState con varios ejemplos prácticos, demostrando diferentes escenarios de formularios y técnicas de validación. Ten en cuenta que probablemente estarás usando una librería como @mantine/form o extendiendo react-hook-form para obtener una funcionalidad similar. Estos son ejemplos de cómo *usarías* dicho hook, no de cómo implementarlo desde cero cada vez.

Ejemplo 1: Formulario de Contacto Simple

Este ejemplo demuestra un formulario de contacto simple con campos para nombre, correo electrónico y mensaje. Implementaremos una validación básica para asegurar que todos los campos sean obligatorios y que la dirección de correo electrónico sea válida.

            
// Asume una implementación hipotética de useFormState o una librería como @mantine/form
import React from 'react';
import { useFormState } from './useFormState'; // Reemplaza con la importación real

function ContactForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      name: '',
      email: '',
      message: '',
    },
    validationRules: {
      name: (value) => (value ? null : 'El nombre es obligatorio'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Dirección de correo electrónico inválida'),
      message: (value) => (value ? null : 'El mensaje es obligatorio'),
    },
    onSubmit: (values) => {
      console.log('Formulario enviado:', values);
      // Agrega tu lógica de envío de formulario aquí
    },
  });

  return (
    
      
        Nombre:
        
        {errors.name && touched.name && {errors.name}}
      
      
        Correo Electrónico:
        
        {errors.email && touched.email && {errors.email}}
      
      
        Mensaje:
                {errors.message && touched.message && <span className="error">{errors.message}</span>}
      </div>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEFzdW1lIHVuYSBpbXBsZW1lbnRhY2nzbiBoaXBvdOl0aWNhIGRlIHVzZUZvcm1TdGF0ZSBvIHVuYSBsaWJyZXLtYSBjb21vIEBtYW50aW5lL2Zvcm0KaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSAnLi91c2VGb3JtU3RhdGUnOyAvLyBSZWVtcGxhemEgY29uIGxhIGltcG9ydGFjafNuIHJlYWwKCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IHsgdmFsdWVzLCBlcnJvcnMsIHRvdWNoZWQsIGhhbmRsZUNoYW5nZSwgaGFuZGxlU3VibWl0IH0gPSB1c2VGb3JtU3RhdGUoewogICAgaW5pdGlhbFZhbHVlczogewogICAgICBuYW1lOiAnJywKICAgICAgZW1haWw6ICcnLAogICAgICBtZXNzYWdlOiAnJywKICAgIH0sCiAgICB2YWxpZGF0aW9uUnVsZXM6IHsKICAgICAgbmFtZTogKHZhbHVlKSA9PiAodmFsdWUgPyBudWxsIDogJ0VsIG5vbWJyZSBlcyBvYmxpZ2F0b3JpbycpLAogICAgICBlbWFpbDogKHZhbHVlKSA9PiAodmFsdWUgJiYgL15bXlxzQF0rQFteXHNAXStcLlteXHNAXSskLy50ZXN0KHZhbHVlKSA/IG51bGwgOiAnRGlyZWNjafNuIGRlIGNvcnJlbyBlbGVjdHLzbmljbyBpbnbhbGlkYScpLAogICAgICBtZXNzYWdlOiAodmFsdWUpID0+ICh2YWx1ZSA/IG51bGwgOiAnRWwgbWVuc2FqZSBlcyBvYmxpZ2F0b3JpbycpLAogICAgfSwKICAgIG9uU3VibWl0OiAodmFsdWVzKSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdGb3JtdWxhcmlvIGVudmlhZG86JywgdmFsdWVzKTsKICAgICAgLy8gQWdyZWdhIHR1IGzzZ2ljYSBkZSBlbnbtbyBkZSBmb3JtdWxhcmlvIGFxde0KICAgIH0sCiAgfSk7CgogIHJldHVybiAoCiAgICA8Zm9ybSBvblN1Ym1pdD17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+Tm9tYnJlOjwvbGFiZWw+CiAgICAgICAgPGlucHV0CiAgICAgICAgICB0eXBlPSJ0ZXh0IgogICAgICAgICAgaWQ9Im5hbWUiCiAgICAgICAgICBuYW1lPSJuYW1lIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy5uYW1lfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMubmFtZSAmJiB0b3VjaGVkLm5hbWUgJiYgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5uYW1lfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+Q29ycmVvIEVsZWN0cvNuaWNvOjwvbGFiZWw+CiAgICAgICAgPGlucHV0CiAgICAgICAgICB0eXBlPSJlbWFpbCIKICAgICAgICAgIGlkPSJlbWFpbCIKICAgICAgICAgIG5hbWU9ImVtYWlsIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy5lbWFpbH0KICAgICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9CiAgICAgICAgLz4KICAgICAgICB7ZXJyb3JzLmVtYWlsICYmIHRvdWNoZWQuZW1haWwgJiYgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5lbWFpbH08L3NwYW4+fQogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibWVzc2FnZSI+TWVuc2FqZTo8L2xhYmVsPgogICAgICAgIDx0ZXh0YXJlYQogICAgICAgICAgaWQ9Im1lc3NhZ2UiCiAgICAgICAgICBuYW1lPSJtZXNzYWdlIgogICAgICAgICAgdmFsdWU9e3ZhbHVlcy5tZXNzYWdlfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMubWVzc2FnZSAmJiB0b3VjaGVkLm1lc3NhZ2UgJiYgPHNwYW4gY2xhc3NOYW1lPSJlcnJvciI+e2Vycm9ycy5tZXNzYWdlfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+RW52aWFyPC9idXR0b24+CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgQ29udGFjdEZvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Explicación:</b></p>
<ul>
  <li>Inicializamos <code>useFormState</code> con valores iniciales para los campos del formulario y reglas de validación.</li>
  <li>La función <code>handleChange</code> actualiza el estado del formulario cada vez que un campo de entrada cambia.</li>
  <li>La función <code>handleSubmit</code> se llama cuando se envía el formulario. Verifica si hay errores de validación antes de enviar los datos.</li>
  <li>Los mensajes de error se muestran junto a los campos de entrada correspondientes si hay errores de validación y el campo ha sido tocado (ha perdido el foco).</li>
</ul>

<h3>Ejemplo 2: Formulario de Registro con Confirmación de Contraseña</h3>

<p>Este ejemplo demuestra un formulario de registro con campos para nombre de usuario, correo electrónico, contraseña y confirmación de contraseña. Implementaremos validación para asegurar que todos los campos sean obligatorios, que la dirección de correo electrónico sea válida, que la contraseña cumpla ciertos criterios (p. ej., longitud mínima) y que la confirmación de contraseña coincida con la contraseña.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Asume una implementación hipotética de useFormState o una librería como @mantine/form
import React from 'react';
import { useFormState } from './useFormState'; // Reemplaza con la importación real

function RegistrationForm() {
  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      username: '',
      email: '',
      password: '',
      passwordConfirmation: '',
    },
    validationRules: {
      username: (value) => (value ? null : 'El nombre de usuario es obligatorio'),
      email: (value) => (value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Dirección de correo electrónico inválida'),
      password: (value) => (value && value.length >= 8 ? null : 'La contraseña debe tener al menos 8 caracteres'),
      passwordConfirmation: (value) =>
        value === values.password ? null : 'La confirmación de la contraseña no coincide con la contraseña',
    },
    onSubmit: (values) => {
      console.log('Formulario enviado:', values);
      // Agrega tu lógica de envío de formulario aquí
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Nombre de usuario:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
        {errors.username && touched.username && <span className="error">{errors.username}</span>}
      </div>
      <div>
        <label htmlFor="email">Correo Electrónico:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && touched.email && <span className="error">{errors.email}</span>}
      </div>
      <div>
        <label htmlFor="password">Contraseña:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && touched.password && <span className="error">{errors.password}</span>}
      </div>
      <div>
        <label htmlFor="passwordConfirmation">Confirmación de Contraseña:</label>
        <input
          type="password"
          id="passwordConfirmation"
          name="passwordConfirmation"
          value={values.passwordConfirmation}
          onChange={handleChange}
        />
        {errors.passwordConfirmation && touched.passwordConfirmation && (
          <span className="error">{errors.passwordConfirmation}</span>
        )}
      </div>
      <button type="submit">Registrarse</button>
    </form>
  );
}

export default RegistrationForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEFzdW1lIHVuYSBpbXBsZW1lbnRhY2nzbiBoaXBvdOl0aWNhIGRlIHVzZUZvcm1TdGF0ZSBvIHVuYSBsaWJyZXLtYSBjb21vIEBtYW50aW5lL2Zvcm0KaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSAnLi91c2VGb3JtU3RhdGUnOyAvLyBSZWVtcGxhemEgY29uIGxhIGltcG9ydGFjafNuIHJlYWwKCmZ1bmN0aW9uIFJlZ2lzdHJhdGlvbkZvcm0oKSB7CiAgY29uc3QgeyB2YWx1ZXMsIGVycm9ycywgdG91Y2hlZCwgaGFuZGxlQ2hhbmdlLCBoYW5kbGVTdWJtaXQgfSA9IHVzZUZvcm1TdGF0ZSh7CiAgICBpbml0aWFsVmFsdWVzOiB7CiAgICAgIHVzZXJuYW1lOiAnJywKICAgICAgZW1haWw6ICcnLAogICAgICBwYXNzd29yZDogJycsCiAgICAgIHBhc3N3b3JkQ29uZmlybWF0aW9uOiAnJywKICAgIH0sCiAgICB2YWxpZGF0aW9uUnVsZXM6IHsKICAgICAgdXNlcm5hbWU6ICh2YWx1ZSkgPT4gKHZhbHVlID8gbnVsbCA6ICdFbCBub21icmUgZGUgdXN1YXJpbyBlcyBvYmxpZ2F0b3JpbycpLAogICAgICBlbWFpbDogKHZhbHVlKSA9PiAodmFsdWUgJiYgL15bXlxzQF0rQFteXHNAXStcLlteXHNAXSskLy50ZXN0KHZhbHVlKSA/IG51bGwgOiAnRGlyZWNjafNuIGRlIGNvcnJlbyBlbGVjdHLzbmljbyBpbnbhbGlkYScpLAogICAgICBwYXNzd29yZDogKHZhbHVlKSA9PiAodmFsdWUgJiYgdmFsdWUubGVuZ3RoID49IDggPyBudWxsIDogJ0xhIGNvbnRyYXNl8WEgZGViZSB0ZW5lciBhbCBtZW5vcyA4IGNhcmFjdGVyZXMnKSwKICAgICAgcGFzc3dvcmRDb25maXJtYXRpb246ICh2YWx1ZSkgPT4KICAgICAgICB2YWx1ZSA9PT0gdmFsdWVzLnBhc3N3b3JkID8gbnVsbCA6ICdMYSBjb25maXJtYWNp824gZGUgbGEgY29udHJhc2XxYSBubyBjb2luY2lkZSBjb24gbGEgY29udHJhc2XxYScsCiAgICB9LAogICAgb25TdWJtaXQ6ICh2YWx1ZXMpID0+IHsKICAgICAgY29uc29sZS5sb2coJ0Zvcm11bGFyaW8gZW52aWFkbzonLCB2YWx1ZXMpOwogICAgICAvLyBBZ3JlZ2EgdHUgbPNnaWNhIGRlIGVudu1vIGRlIGZvcm11bGFyaW8gYXF17QogICAgfSwKICB9KTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIG9uU3VibWl0PXtoYW5kbGVTdWJtaXR9PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJ1c2VybmFtZSI+Tm9tYnJlIGRlIHVzdWFyaW86PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgICBpZD0idXNlcm5hbWUiCiAgICAgICAgICBuYW1lPSJ1c2VybmFtZSIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMudXNlcm5hbWV9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy51c2VybmFtZSAmJiB0b3VjaGVkLnVzZXJuYW1lICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMudXNlcm5hbWV9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9ImVtYWlsIj5Db3JyZW8gRWxlY3Ry825pY286PC9sYWJlbD4KICAgICAgICA8aW5wdXQKICAgICAgICAgIHR5cGU9ImVtYWlsIgogICAgICAgICAgaWQ9ImVtYWlsIgogICAgICAgICAgbmFtZT0iZW1haWwiCiAgICAgICAgICB2YWx1ZT17dmFsdWVzLmVtYWlsfQogICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX0KICAgICAgICAvPgogICAgICAgIHtlcnJvcnMuZW1haWwgJiYgdG91Y2hlZC5lbWFpbCAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLmVtYWlsfTwvc3Bhbj59CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJwYXNzd29yZCI+Q29udHJhc2XxYTo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0icGFzc3dvcmQiCiAgICAgICAgICBpZD0icGFzc3dvcmQiCiAgICAgICAgICBuYW1lPSJwYXNzd29yZCIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMucGFzc3dvcmR9CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5wYXNzd29yZCAmJiB0b3VjaGVkLnBhc3N3b3JkICYmIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMucGFzc3dvcmR9PC9zcGFuPn0KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9InBhc3N3b3JkQ29uZmlybWF0aW9uIj5Db25maXJtYWNp824gZGUgQ29udHJhc2XxYTo8L2xhYmVsPgogICAgICAgIDxpbnB1dAogICAgICAgICAgdHlwZT0icGFzc3dvcmQiCiAgICAgICAgICBpZD0icGFzc3dvcmRDb25maXJtYXRpb24iCiAgICAgICAgICBuYW1lPSJwYXNzd29yZENvbmZpcm1hdGlvbiIKICAgICAgICAgIHZhbHVlPXt2YWx1ZXMucGFzc3dvcmRDb25maXJtYXRpb259CiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfQogICAgICAgIC8+CiAgICAgICAge2Vycm9ycy5wYXNzd29yZENvbmZpcm1hdGlvbiAmJiB0b3VjaGVkLnBhc3N3b3JkQ29uZmlybWF0aW9uICYmICgKICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT0iZXJyb3IiPntlcnJvcnMucGFzc3dvcmRDb25maXJtYXRpb259PC9zcGFuPgogICAgICAgICl9CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+UmVnaXN0cmFyc2U8L2J1dHRvbj4KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBSZWdpc3RyYXRpb25Gb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Explicación:</b></p>
<ul>
  <li>Agregamos un campo <code>passwordConfirmation</code> y una regla de validación para asegurar que coincida con el campo <code>password</code>.</li>
  <li>La regla de validación para <code>passwordConfirmation</code> accede al objeto <code>values</code> para comparar los dos campos de contraseña.</li>
</ul>

<h3>Ejemplo 3: Formulario Dinámico con Campos de Array</h3>

<p>Este ejemplo demuestra un formulario dinámico donde el número de campos puede cambiar dinámicamente. Esto es útil para escenarios como agregar múltiples habilidades o experiencias a un perfil. Usaremos un array para almacenar los valores de los campos dinámicos y proporcionaremos funciones para agregar y eliminar campos.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
// Asume una implementación hipotética de useFormState o una librería como @mantine/form
import React, { useState } from 'react';
import { useFormState } from './useFormState'; // Reemplaza con la importación real

function SkillsForm() {
  const [skills, setSkills] = useState(['']); // Campo de habilidad inicial

  const { values, errors, touched, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: skills, // Inicializa con el estado actual de las habilidades
    },
    validationRules: {
      skills: (value) => {
        // Validación de ejemplo: Asegura que cada habilidad no esté vacía
        for (let i = 0; i < value.length; i++) {
          if (!value[i]) {
            return 'Todas las habilidades son obligatorias'; // Devuelve un único mensaje de error
          }
        }
        return null; // Sin error si todas las habilidades son válidas
      },
    },
    onSubmit: (values) => {
      console.log('Formulario enviado:', values);
      // Agrega tu lógica de envío de formulario aquí
    },
  });

  const handleSkillChange = (index, event) => {
    const newSkills = [...skills];
    newSkills[index] = event.target.value;
    setSkills(newSkills);

    // Actualiza el estado del formulario manualmente ya que estamos gestionando el array fuera de useFormState
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  const addSkill = () => {
    setSkills([...skills, '']);
    // Dispara manualmente la revalidación para el campo 'skills'
    handleChange({ target: { name: 'skills', value: [...skills, ''] } });
  };

  const removeSkill = (index) => {
    const newSkills = [...skills];
    newSkills.splice(index, 1);
    setSkills(newSkills);

    // Dispara manualmente la revalidación para el campo 'skills'
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Habilidades:</label>
        {skills.map((skill, index) => (
          <div key={index}>
            <input
              type="text"
              value={skill}
              onChange={(event) => handleSkillChange(index, event)}
            />
            <button type="button" onClick={() => removeSkill(index)}>Eliminar</button>
          </div>
        ))}
        <button type="button" onClick={addSkill}>Añadir Habilidad</button>
        {errors.skills && touched.skills && <span className="error">{errors.skills}</span>}
      </div>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default SkillsForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEFzdW1lIHVuYSBpbXBsZW1lbnRhY2nzbiBoaXBvdOl0aWNhIGRlIHVzZUZvcm1TdGF0ZSBvIHVuYSBsaWJyZXLtYSBjb21vIEBtYW50aW5lL2Zvcm0KaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnOwppbXBvcnQgeyB1c2VGb3JtU3RhdGUgfSBmcm9tICcuL3VzZUZvcm1TdGF0ZSc7IC8vIFJlZW1wbGF6YSBjb24gbGEgaW1wb3J0YWNp824gcmVhbAoKZnVuY3Rpb24gU2tpbGxzRm9ybSgpIHsKICBjb25zdCBbc2tpbGxzLCBzZXRTa2lsbHNdID0gdXNlU3RhdGUoWycnXSk7IC8vIENhbXBvIGRlIGhhYmlsaWRhZCBpbmljaWFsCgogIGNvbnN0IHsgdmFsdWVzLCBlcnJvcnMsIHRvdWNoZWQsIGhhbmRsZUNoYW5nZSwgaGFuZGxlU3VibWl0IH0gPSB1c2VGb3JtU3RhdGUoewogICAgaW5pdGlhbFZhbHVlczogewogICAgICBza2lsbHM6IHNraWxscywgLy8gSW5pY2lhbGl6YSBjb24gZWwgZXN0YWRvIGFjdHVhbCBkZSBsYXMgaGFiaWxpZGFkZXMKICAgIH0sCiAgICB2YWxpZGF0aW9uUnVsZXM6IHsKICAgICAgc2tpbGxzOiAodmFsdWUpID0+IHsKICAgICAgICAvLyBWYWxpZGFjafNuIGRlIGVqZW1wbG86IEFzZWd1cmEgcXVlIGNhZGEgaGFiaWxpZGFkIG5vIGVzdOkgdmFj7WEKICAgICAgICBmb3IgKGxldCBpID0gMDsgaSA8IHZhbHVlLmxlbmd0aDsgaSsrKSB7CiAgICAgICAgICBpZiAoIXZhbHVlW2ldKSB7CiAgICAgICAgICAgIHJldHVybiAnVG9kYXMgbGFzIGhhYmlsaWRhZGVzIHNvbiBvYmxpZ2F0b3JpYXMnOyAvLyBEZXZ1ZWx2ZSB1biD6bmljbyBtZW5zYWplIGRlIGVycm9yCiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIHJldHVybiBudWxsOyAvLyBTaW4gZXJyb3Igc2kgdG9kYXMgbGFzIGhhYmlsaWRhZGVzIHNvbiB24WxpZGFzCiAgICAgIH0sCiAgICB9LAogICAgb25TdWJtaXQ6ICh2YWx1ZXMpID0+IHsKICAgICAgY29uc29sZS5sb2coJ0Zvcm11bGFyaW8gZW52aWFkbzonLCB2YWx1ZXMpOwogICAgICAvLyBBZ3JlZ2EgdHUgbPNnaWNhIGRlIGVudu1vIGRlIGZvcm11bGFyaW8gYXF17QogICAgfSwKICB9KTsKCiAgY29uc3QgaGFuZGxlU2tpbGxDaGFuZ2UgPSAoaW5kZXgsIGV2ZW50KSA9PiB7CiAgICBjb25zdCBuZXdTa2lsbHMgPSBbLi4uc2tpbGxzXTsKICAgIG5ld1NraWxsc1tpbmRleF0gPSBldmVudC50YXJnZXQudmFsdWU7CiAgICBzZXRTa2lsbHMobmV3U2tpbGxzKTsKCiAgICAvLyBBY3R1YWxpemEgZWwgZXN0YWRvIGRlbCBmb3JtdWxhcmlvIG1hbnVhbG1lbnRlIHlhIHF1ZSBlc3RhbW9zIGdlc3Rpb25hbmRvIGVsIGFycmF5IGZ1ZXJhIGRlIHVzZUZvcm1TdGF0ZQogICAgaGFuZGxlQ2hhbmdlKHsgdGFyZ2V0OiB7IG5hbWU6ICdza2lsbHMnLCB2YWx1ZTogbmV3U2tpbGxzIH0gfSk7CiAgfTsKCiAgY29uc3QgYWRkU2tpbGwgPSAoKSA9PiB7CiAgICBzZXRTa2lsbHMoWy4uLnNraWxscywgJyddKTsKICAgIC8vIERpc3BhcmEgbWFudWFsbWVudGUgbGEgcmV2YWxpZGFjafNuIHBhcmEgZWwgY2FtcG8gJ3NraWxscycKICAgIGhhbmRsZUNoYW5nZSh7IHRhcmdldDogeyBuYW1lOiAnc2tpbGxzJywgdmFsdWU6IFsuLi5za2lsbHMsICcnXSB9IH0pOwogIH07CgogIGNvbnN0IHJlbW92ZVNraWxsID0gKGluZGV4KSA9PiB7CiAgICBjb25zdCBuZXdTa2lsbHMgPSBbLi4uc2tpbGxzXTsKICAgIG5ld1NraWxscy5zcGxpY2UoaW5kZXgsIDEpOwogICAgc2V0U2tpbGxzKG5ld1NraWxscyk7CgogICAgLy8gRGlzcGFyYSBtYW51YWxtZW50ZSBsYSByZXZhbGlkYWNp824gcGFyYSBlbCBjYW1wbyAnc2tpbGxzJwogICAgaGFuZGxlQ2hhbmdlKHsgdGFyZ2V0OiB7IG5hbWU6ICdza2lsbHMnLCB2YWx1ZTogbmV3U2tpbGxzIH0gfSk7CiAgfTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIG9uU3VibWl0PXtoYW5kbGVTdWJtaXR9PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbD5IYWJpbGlkYWRlczo8L2xhYmVsPgogICAgICAgIHtza2lsbHMubWFwKChza2lsbCwgaW5kZXgpID0+ICgKICAgICAgICAgIDxkaXYga2V5PXtpbmRleH0+CiAgICAgICAgICAgIDxpbnB1dAogICAgICAgICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgICAgICAgdmFsdWU9e3NraWxsfQogICAgICAgICAgICAgIG9uQ2hhbmdlPXsoZXZlbnQpID0+IGhhbmRsZVNraWxsQ2hhbmdlKGluZGV4LCBldmVudCl9CiAgICAgICAgICAgIC8+CiAgICAgICAgICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBvbkNsaWNrPXsoKSA9PiByZW1vdmVTa2lsbChpbmRleCl9PkVsaW1pbmFyPC9idXR0b24+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICApKX0KICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgb25DbGljaz17YWRkU2tpbGx9PkHxYWRpciBIYWJpbGlkYWQ8L2J1dHRvbj4KICAgICAgICB7ZXJyb3JzLnNraWxscyAmJiB0b3VjaGVkLnNraWxscyAmJiA8c3BhbiBjbGFzc05hbWU9ImVycm9yIj57ZXJyb3JzLnNraWxsc308L3NwYW4+fQogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPkVudmlhcjwvYnV0dG9uPgogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IFNraWxsc0Zvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Explicación:</b></p>
<ul>
  <li>Este ejemplo requiere un poco más de gestión manual del estado para el array dinámico.</li>
  <li>Usamos el hook <code>useState</code> para gestionar el array de habilidades.</li>
  <li>Las funciones <code>handleSkillChange</code>, <code>addSkill</code> y <code>removeSkill</code> actualizan el array y disparan manualmente la función <code>handleChange</code> de <code>useFormState</code> para mantener el estado del formulario sincronizado. Esto se debe a que la librería a menudo maneja las propiedades de los *objetos*, pero no necesariamente las mutaciones de un array de nivel superior.</li>
  <li>La regla de validación para las habilidades verifica si todas las habilidades no están vacías.</li>
</ul>

<h2>Técnicas de Validación Avanzadas</h2>

<p>Más allá de la validación básica de campos obligatorios, puedes implementar técnicas de validación más avanzadas para garantizar la integridad de los datos y mejorar la experiencia del usuario. Aquí hay algunos ejemplos:</p>

<ul>
  <li><b>Expresiones Regulares:</b> Usa expresiones regulares para validar direcciones de correo electrónico, números de teléfono y otros formatos de datos.</li>
  <li><b>Funciones de Validación Personalizadas:</b> Crea funciones de validación personalizadas para implementar lógicas de validación complejas, como verificar nombres de usuario únicos o la fortaleza de una contraseña.</li>
  <li><b>Validación Asíncrona:</b> Realiza validaciones asíncronas, como verificar si un nombre de usuario está disponible en el servidor, antes de enviar el formulario. Esto suele ser compatible con librerías como <code>react-hook-form</code>.</li>
  <li><b>Validación Condicional:</b> Aplica reglas de validación basadas en los valores de otros campos del formulario. Por ejemplo, podrías requerir un número de teléfono solo si el usuario selecciona un país específico.</li>
  <li><b>Librerías de Validación de Terceros:</b> Intégrate con librerías de validación de terceros, como Yup o Zod, para definir esquemas de validación y simplificar la lógica de validación. Estas librerías a menudo ofrecen características más avanzadas, como la transformación y coerción de datos.</li>
</ul>

<h2>Consideraciones de Accesibilidad</h2>

<p>La accesibilidad es un aspecto crucial del desarrollo de formularios. Asegúrate de que tus formularios sean accesibles para usuarios con discapacidades siguiendo estas pautas:</p>

<ul>
  <li><b>Proporciona Etiquetas Claras y Concisas:</b> Usa etiquetas descriptivas para todos los campos de entrada para explicar su propósito.</li>
  <li><b>Usa HTML Semántico:</b> Utiliza elementos HTML semánticos, como <code><label></code>, <code><input></code> y <code><textarea></code>, para estructurar tus formularios.</li>
  <li><b>Proporciona Mensajes de Error:</b> Muestra mensajes de error claros y concisos para informar a los usuarios sobre entradas inválidas.</li>
  <li><b>Asocia Etiquetas con Entradas:</b> Usa el atributo <code>for</code> en los elementos <code><label></code> para asociarlos con los campos de entrada correspondientes.</li>
  <li><b>Usa Atributos ARIA:</b> Usa atributos ARIA, como <code>aria-describedby</code> y <code>aria-invalid</code>, para proporcionar información adicional a las tecnologías de asistencia.</li>
  <li><b>Garantiza la Accesibilidad por Teclado:</b> Asegúrate de que todos los elementos del formulario sean accesibles usando el teclado.</li>
  <li><b>Prueba con Tecnologías de Asistencia:</b> Prueba tus formularios con tecnologías de asistencia, como lectores de pantalla, para asegurarte de que sean accesibles para usuarios con discapacidades.</li>
</ul>

<h2>Mejores Prácticas para useFormState</h2>

<p>Aquí hay algunas mejores prácticas a seguir al usar <code>useFormState</code>:</p>

<ul>
  <li><b>Mantén las Reglas de Validación Concisas:</b> Define las reglas de validación de manera clara y concisa.</li>
  <li><b>Proporciona Mensajes de Error Amigables para el Usuario:</b> Muestra mensajes de error que sean fáciles de entender y que ofrezcan una guía útil a los usuarios.</li>
  <li><b>Prueba tus Formularios a Fondo:</b> Prueba tus formularios con diferentes valores de entrada y escenarios para asegurar que funcionen correctamente y manejen los errores con elegancia.</li>
  <li><b>Considera las Implicaciones de Rendimiento:</b> Ten en cuenta las implicaciones de rendimiento de las reglas de validación complejas y la validación asíncrona.</li>
  <li><b>Usa una Librería de Formularios:</b> Considera seriamente usar una librería de formularios bien establecida (como <code>@mantine/form</code> o <code>react-hook-form</code>), ya que proporcionan características robustas, optimizaciones de rendimiento y mejoras de accesibilidad listas para usar. ¡No reinventes la rueda!</li>
</ul>

<h2>Consideraciones Globales para el Diseño de Formularios</h2>

<p>Al diseñar formularios para una audiencia global, es crucial considerar las diferencias culturales y los requisitos de localización. Aquí hay algunas consideraciones clave:</p>

<ul>
  <li><b>Formatos de Dirección:</b> Los formatos de dirección varían significativamente entre países. Proporciona campos de dirección flexibles que se adapten a diferentes estructuras de dirección. Considera usar un selector de país para ajustar automáticamente los campos de dirección según el país seleccionado.</li>
  <li><b>Formatos de Número de Teléfono:</b> Los formatos de número de teléfono también varían entre países. Proporciona un selector de código de país y permite a los usuarios ingresar números de teléfono en su formato local.</li>
  <li><b>Formatos de Fecha:</b> Los formatos de fecha difieren entre países. Usa un selector de fecha que admita diferentes formatos de fecha o permite a los usuarios seleccionar su formato de fecha preferido. Por ejemplo, EE. UU. típicamente usa MM/DD/AAAA, mientras que Europa a menudo usa DD/MM/AAAA.</li>
  <li><b>Formatos de Moneda:</b> Los formatos de moneda varían entre países. Muestra símbolos y formatos de moneda basados en la configuración regional del usuario.</li>
  <li><b>Orden del Nombre:</b> El orden del nombre varía entre culturas. Algunas culturas usan el nombre de pila primero, mientras que otras usan el apellido primero. Proporciona campos separados para el nombre de pila y el apellido o permite a los usuarios especificar su orden de nombre preferido.</li>
  <li><b>Soporte de Idiomas:</b> Asegúrate de que tus formularios estén disponibles en múltiples idiomas para atender a una audiencia global. Usa una librería de localización para traducir las etiquetas de los formularios, los mensajes de error y otro texto.</li>
  <li><b>Sensibilidad Cultural:</b> Sé consciente de las sensibilidades culturales al diseñar tus formularios. Evita usar imágenes o lenguaje que puedan ser ofensivos para ciertas culturas.</li>
</ul>

<h2>Conclusión</h2>

<p>El hook <code>useFormState</code> de React, o las características proporcionadas por las librerías de formularios que lo imitan, es una herramienta poderosa para simplificar la gestión del estado y la validación de formularios. Al centralizar el estado del formulario, definir reglas de validación declarativas y proporcionar retroalimentación en tiempo real a los usuarios, <code>useFormState</code> te permite construir formularios robustos, accesibles y fáciles de usar que mejoran la experiencia del usuario y la integridad de los datos. Recuerda considerar seriamente el uso de una librería bien establecida para que se encargue del trabajo pesado por ti.</p>

<p>Al seguir las pautas y mejores prácticas descritas en esta guía completa, puedes dominar el arte del desarrollo de formularios en React y crear formularios excepcionales que satisfagan las necesidades de tus usuarios y de tu aplicación.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">validación de formularios</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">gestión de estado</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">hooks de React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">accesibilidad de formularios</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experiencia de usuario</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">desarrollo web</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">desarrollo front-end</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>