React
Explica cómo useFormStatus expone el estado de envío y cómo useOptimistic muestra cambios temporales mientras una acción asíncrona se confirma o revierte.
Un componente descendiente de un formulario puede leer su envío actual.
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button disabled={pending}>
{pending ? "Guardando..." : "Guardar"}
</button>
);
}Debe renderizarse dentro del formulario cuyo estado necesita.
Permite mostrar el resultado esperado antes de que el servidor confirme.
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(current, text: string) => [
...current,
{ id: crypto.randomUUID(), text, pending: true },
],
);La Action agrega el valor optimista y luego ejecuta la mutación real.
El optimismo es apropiado cuando el resultado tiene alta probabilidad de éxito y puede revertirse o marcarse como fallido.
No lo uses para operaciones irreversibles o altamente sensibles sin una UX clara.
Los elementos optimistas necesitan keys estables temporales para no perder estado visual.
La UI optimista mejora percepción de velocidad, pero debe reconciliarse con la fuente autoritativa.
function SubmitButton() {
const { pending, data, method, action } = useFormStatus();
// ...
}El Hook debe ejecutarse en un descendiente del <form>. Si se llama en el mismo componente que crea el formulario, no observa ese formulario porque el provider interno está por debajo.
function Form() {
return (
<form action={saveAction}>
<Fields />
<SubmitButton />
</form>
);
}function SubmitButton() {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending} aria-disabled={pending}>
{pending ? "Guardando cambios…" : "Guardar cambios"}
</button>
);
}Comunica qué ocurre. Un spinner sin texto puede carecer de nombre accesible. Deshabilitar evita doble activación, pero no reemplaza idempotencia del servidor.
data puede contener el FormData del submit actual. Úsalo con cuidado para feedback temporal, sin mostrar contraseñas o datos sensibles. El valor confirmado sigue viniendo del servidor o state autoritativo.
valor confirmado
↓ iniciar Action
transformación optimista
↓ mostrar resultado temporal
servidor confirma
├─ éxito → nueva fuente confirmada
└─ error → volver o marcar falloconst [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(current, optimisticMessage: Message) => [
...current,
optimisticMessage,
],
);La función transformadora debe ser pura.
function MessageForm({ messages, sendMessage }: Props) {
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(current, message: Message) => [...current, message],
);
async function action(formData: FormData) {
const text = String(formData.get("message") ?? "").trim();
if (!text) return;
const temporaryId = crypto.randomUUID();
addOptimisticMessage({
id: temporaryId,
text,
status: "sending",
});
await sendMessage({ temporaryId, text });
}
return (
<>
<MessageList messages={optimisticMessages} />
<form action={action}>
<input name="message" />
<SubmitButton />
</form>
</>
);
}La fuente messages debe actualizarse después de confirmación para reemplazar el estado optimista.
Un elemento optimista necesita identidad estable. Si el servidor devuelve otro ID, decide cómo relacionarlos:
temporaryId al servidor y devolverlo.Una key aleatoria nueva en cada render destruye el elemento temporal y puede causar saltos.
El rollback puede ser automático cuando la Action termina y la fuente confirmada no contiene el cambio. Pero la UX puede necesitar conservar un elemento marcado como fallido:
{ id, text, status: "failed" }Así el usuario puede reintentar o copiar el contenido. Diseña explícitamente:
Puedes mostrar pending sin afirmar éxito anticipado.
Cada elemento puede tener su propio estado pendiente. Evita un único boolean global que bloquee toda la pantalla. Modela identidad de operación y qué acciones son compatibles entre sí.
Prueba:
useFormStatus observa el formulario padre desde un descendiente.useOptimistic muestra una transformación temporal, no cambia la fuente autoritativa.useFormStatus no funciona al lado del <form> que lo crea?useOptimistic debe ser pura?Memoización: memo, useMemo y useCallback separa optimización de identidad de las garantías semánticas del estado.