M

MLOG

Español

Una guía completa del hook useFormStatus de React, que permite a los desarrolladores crear experiencias de envío de formularios atractivas e informativas para usuarios globales.

React useFormStatus: Dominando el estado de envío de formularios

Los formularios son la columna vertebral de innumerables aplicaciones web, sirviendo como el principal medio para que los usuarios interactúen y proporcionen datos a los servidores. Asegurar un proceso de envío de formularios fluido e informativo es crucial para crear experiencias de usuario positivas. React 18 introdujo un potente hook llamado useFormStatus, diseñado para simplificar la gestión del estado de envío de formularios. Esta guía proporciona una visión general completa de useFormStatus, explorando sus características, casos de uso y mejores prácticas para construir formularios accesibles y atractivos para una audiencia global.

¿Qué es React useFormStatus?

useFormStatus es un Hook de React que proporciona información sobre el estado de envío de un formulario. Está diseñado para funcionar perfectamente con las acciones de servidor, una característica que te permite ejecutar lógica del lado del servidor directamente desde tus componentes de React. El hook devuelve un objeto que contiene información sobre el estado pendiente del formulario, los datos y cualquier error que haya ocurrido durante el envío. Esta información te permite proporcionar retroalimentación en tiempo real a los usuarios, como mostrar indicadores de carga, deshabilitar elementos del formulario y mostrar mensajes de error.

Entendiendo las Acciones de Servidor

Antes de sumergirse en useFormStatus, es esencial entender las acciones de servidor. Las acciones de servidor son funciones asíncronas que se ejecutan en el servidor y pueden ser invocadas directamente desde componentes de React. Se definen usando la directiva 'use server' al principio del archivo. Las acciones de servidor se usan comúnmente para tareas como:

Aquí hay un ejemplo simple de una acción de servidor:

// actions.js
'use server';

export async function submitForm(formData) {
  // Simula un retraso para imitar una solicitud al servidor
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Por favor, rellene todos los campos.' };
  }

  // Simula un envío exitoso
  return { message: `¡Formulario enviado con éxito para ${name}!` };
}

Esta acción toma los datos del formulario como entrada, simula un retraso y luego devuelve un mensaje de éxito o error. La directiva 'use server' le dice a React que esta función debe ejecutarse en el servidor.

Cómo funciona useFormStatus

El hook useFormStatus se utiliza dentro de un componente que renderiza un formulario. Necesita ser usado dentro de un elemento <form> que utiliza la prop `action` con la Acción de Servidor importada. El hook devuelve un objeto con las siguientes propiedades:

Aquí hay un ejemplo de cómo usar useFormStatus en un componente de React:

'use client'
import { useFormStatus } from 'react-dom';
import { submitForm } from './actions';

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Nombre:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Enviando...' : 'Enviar'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

En este ejemplo:

Beneficios de usar useFormStatus

useFormStatus ofrece varias ventajas para gestionar el estado de envío de formularios:

Mejores prácticas para usar useFormStatus

Para maximizar los beneficios de useFormStatus, considera las siguientes mejores prácticas:

Casos de uso para useFormStatus

useFormStatus es aplicable en una amplia gama de escenarios:

Abordando la Internacionalización (i18n)

Al construir formularios para una audiencia global, la internacionalización (i18n) es crucial. Aquí se explica cómo abordar la i18n al usar useFormStatus:

Ejemplo con i18next:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import es from './locales/es.json';
import en from './locales/en.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      es: { translation: es },
      en: { translation: en },
    },
    lng: 'es',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // react ya protege de xss
    },
  });

export default i18n;

// MyForm.js

import { useTranslation } from 'react-i18next';

function MyForm() {
  const { t } = useTranslation();
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">{t('nombre')}:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">{t('email')}:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? t('enviando') : t('enviar')}
      </button>
      {error && <p style={{ color: 'red' }}>{t('error')}: {t(error.message)}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{t(data.message)}</p>}
    </form>
  );
}

export default MyForm;

Consideraciones de Accesibilidad

Asegurar la accesibilidad es primordial al construir formularios. Aquí se explica cómo hacer tus formularios más accesibles al usar useFormStatus:

Ejemplo con atributos ARIA:

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Nombre:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Indica si hay un error
        aria-describedby={error ? 'name-error' : null} // Asocia el mensaje de error
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Enviando...' : 'Enviar'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Más allá del uso básico: Técnicas avanzadas

Aunque el uso básico de useFormStatus es sencillo, varias técnicas avanzadas pueden mejorar aún más tu experiencia de envío de formularios:

Solución de problemas comunes

Al usar useFormStatus, podrías encontrar algunos problemas comunes. Aquí se explica cómo solucionarlos:

Alternativas a useFormStatus

Aunque useFormStatus es una herramienta poderosa, existen enfoques alternativos para gestionar el estado de envío de formularios, especialmente en versiones antiguas de React o cuando se trata de lógica de formularios compleja:

La elección del enfoque depende de la complejidad de tu formulario y de tus requisitos específicos. Para formularios simples, useFormStatus es a menudo la solución más sencilla y eficiente. Para formularios más complejos, una biblioteca de formularios o una solución de gestión de estado global puede ser más apropiada.

Conclusión

useFormStatus es una valiosa adición al ecosistema de React, que simplifica la gestión del estado de envío de formularios y permite a los desarrolladores crear experiencias de usuario más atractivas e informativas. Al comprender sus características, mejores prácticas y casos de uso, puedes aprovechar useFormStatus para construir formularios accesibles, internacionalizados y de alto rendimiento para una audiencia global. Adoptar useFormStatus agiliza el desarrollo, mejora la interacción del usuario y, en última instancia, contribuye a aplicaciones web más robustas y fáciles de usar.

Recuerda priorizar la accesibilidad, la internacionalización y el rendimiento al construir formularios para una audiencia global. Siguiendo las mejores prácticas descritas en esta guía, puedes crear formularios que sean utilizables por todos, independientemente de su ubicación o habilidades. Este enfoque contribuye a una web más inclusiva y accesible para todos los usuarios.