Hook useFormStatus

Aprende cómo manejar estados de envío de formularios y proporcionar mejor retroalimentación al usuario

¿Qué es useFormStatus?

useFormStatus es un hook de React que proporciona información sobre el estado de un envío de formulario. Devuelve un objeto con propiedades como pending, data, method y action.

Características Clave:

pending: Booleano que indica si el formulario se está enviando actualmente
data: Objeto FormData que contiene los datos del formulario siendo enviados
method: Método HTTP usado para el envío (GET, POST, etc.)
action: URL o función a la que se está enviando el formulario

Casos de Uso:

Mostrar spinners de carga durante el envío del formulario
Deshabilitar elementos del formulario mientras se envía
Proporcionar retroalimentación en tiempo real a los usuarios
Implementar actualizaciones optimistas de UI

Ejemplo 1: Formulario de Contacto

Un formulario de contacto con estados de carga y retroalimentación de validación

Ejemplo 2: Suscripción al Newsletter

Formulario simple de newsletter con estado de envío

Implementación del Código

'use client'

import { useFormStatus } from 'react-dom'
import { Button } from '@/components/ui/button'

function BotonEnviar() {
  const { pending } = useFormStatus()
  
  return (
    <Button type="submit" disabled={pending}>
      {pending ? 'Enviando...' : 'Enviar'}
    </Button>
  )
}

export default function MiFormulario() {
  async function manejarEnvio(formData: FormData) {
    // Simular llamada a API
    await new Promise(resolve => setTimeout(resolve, 2000))
    console.log('Formulario enviado:', Object.fromEntries(formData))
  }

  return (
    <form action={manejarEnvio}>
      <input name="email" type="email" required />
      <BotonEnviar />
    </form>
  )
}