React 19 de Cero a Experto / React 19 moderno

Reto: Mi Bolsillo con envío optimista

Reto40 min60 XP

Cierras el módulo de React 19 construyendo la experiencia que estos hooks buscan: una "Mi Bolsillo" donde agregar un gasto se siente INSTANTÁNEO —aparece al instante con un relojito, se confirma cuando el "servidor" responde, y se revierte si falla—. Lo construyes con useState (que ya corre en tu entorno) para dominar el PATRÓN a mano; la solución te muestra cómo useActionState y useOptimistic lo expresarían en un proyecto React 19 real. Vas a entender la UI optimista de dentro hacia afuera.

Reto

Mi Bolsillo optimista

Media35 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una "Mi Bolsillo" que agrega gastos con envío optimista contra un servidor simulado:

Servidor simulado: una función guardar(nombre): Promise<void> que tarde ~1s y falle 1 de cada 4 veces (con Math.random()).
Agregar optimista: al enviar, el gasto aparece INMEDIATAMENTE en la lista, marcado como pendiente (opacidad + un ⏳).
Confirmar: cuando el servidor responde OK, el gasto pierde la marca de pendiente (✓).
Revertir: si el servidor falla, el gasto se QUITA de la lista y se muestra un aviso de error.
El botón muestra un estado de "Guardando…" mientras hay un envío en curso.

Reglas

Todo tipado con TypeScript; actualizaciones inmutables (map, filter, [...]).
La lista es la fuente de verdad; el "pendiente" es una marca en cada item.
Distingue claramente los tres momentos: optimista (se ve ya), confirmado, revertido.

35:00

Cuando estés listo, arranca el reloj.

Las ideas que este reto fija:

Optimista = mostrar antes de confirmar. Cambias la UI de inmediato asumiendo éxito, y solo corriges en el caso raro de fallo. La app se siente instantánea porque no deja al usuario esperando.
Dos destinos posibles de un item pendiente: se CONFIRMA (pierde la marca) o se REVIERTE (se quita). Modelarlo como una bandera pendiente en cada item hace el flujo explícito.
Esto es lo que automatiza React 19. Todo el manejo manual de la marca y la reversión es justo lo que useOptimistic hace por ti, y el enviando es lo que da useActionState.

Autoevaluación: agrega varios gastos rápido —¿aparecen al instante con ⏳? ¿los que el servidor acepta pasan a ✓ y los rechazados desaparecen con su aviso? Ese manejo manual de la marca pendiente y de la reversión es EXACTAMENTE lo que useOptimistic automatiza. Así se vería en React 19, sin llevar la reversión a mano:

con-react-19.tsx

import { useOptimistic, useActionState } from "react";

function Bolsillo({ gastos, guardarGasto }: Props) {
const [optimistas, agregarOptimista] = useOptimistic(
  gastos,
  (estado: Gasto[], nombre: string) => [...estado, { id: Date.now(), nombre, pendiente: true }]
);

const [, accion, enviando] = useActionState(async (_prev: unknown, formData: FormData) => {
  const nombre = String(formData.get("nombre"));
  agregarOptimista(nombre);   // se ve YA
  await guardarGasto(nombre); // envía; si falla, la capa optimista se descarta sola
  return null;
}, null);

return (
  <form action={accion}>
    <input name="nombre" />
    <button disabled={enviando}>{enviando ? "Guardando…" : "Agregar"}</button>
    <ul>{optimistas.map((g) => <li key={g.id} style={{ opacity: g.pendiente ? 0.5 : 1 }}>{g.nombre}</li>)}</ul>
  </form>
);
}

Fíjate: desaparecen los useState de enviando y error, el try/catch/finally, y sobre todo la reversión manual (filter) —React descarta la capa optimista solo—. El patrón que dominaste a mano es el mismo; React 19 solo te quita la contabilidad. Ese es el hilo de todo el módulo: entiendes el mecanismo Y la herramienta que lo automatiza.

Qué sigue

Módulo 4 conquistado: dominas el React moderno —Actions, useActionState, useOptimistic, use(), la frontera servidor/cliente y el compilador—. Ya no solo sabes React: sabes hacia dónde va. El módulo 5 aterriza en el problema más común de toda app real: DATOS. Cargar, cachear, reintentar, invalidar y sincronizar con el servidor sin reinventar la rueda —con TanStack Query, Suspense y los Error Boundaries—.