Next.js 34: Actualizaciones optimistas con useOptimistic
easy⏱ 5 mincoursenextjs
UI instantánea, conciliada después
useOptimistic toma tu state actual y un updateFn(currentState, optimisticValue) que describe cómo fusionar un valor nuevo y aún no confirmado. Cada render muestra optimisticState, no el state crudo — así que en cuanto llamas a addOptimistic(...), el elemento nuevo aparece de inmediato, etiquetado como quieras (p. ej. { pending: true }).
import { useOptimistic, useState } from 'react';
const [optimisticComments, addOptimistic] = useOptimistic(
comments,
(current, newComment) => [...current, { ...newComment, pending: true }]
);
// inside the action, before awaiting the server:
addOptimistic({ id: crypto.randomUUID(), text });
Reversión automática
La entrada optimista solo existe mientras su acción está pendiente. Si la acción lanza un error (falla la validación, la petición falla), React simplemente descarta el valor optimista en el siguiente render del state real — sin un arreglo de limpieza manual que mantener. Tú sigues eligiendo en qué se convierte el state real cuando falla (p. ej. dejar el comentario fuera por completo).
Simulando en React 18
Mantenemos dos piezas de state en vez de un hook: los comments confirmados (el state 'real') y optimisticComments (lo que se renderiza). Agregar un comentario actualiza optimisticComments de inmediato; la llamada al servidor falso luego lo promueve a comments (éxito) o la lista vuelve a comments sin cambios (fallo) — el mismo efecto neto que useOptimistic.
Comentarios optimistas
Mantén comments (confirmados) y optimisticComments (mostrados) en useStates separados. Al enviar, agrega el comentario nuevo a optimisticComments con una bandera pending: true de inmediato, dale a los elementos pendientes menos opacidad y una etiqueta '(posting…)', y después del retraso falso promuévelo a comments (si el texto es válido) o revierte optimisticComments a comments (si está vacío — simulando un fallo de validación). Mantén export default App.