useOptimistic: actualiza la UI antes de que responda el servidor

useOptimistic es un hook de React 19 que permite mostrar un estado temporal en la UI mientras una operación asíncrona está en curso.

La idea es sencilla: actúa como si la operación ya hubiera tenido éxito, y cuando el servidor responde, se reconcilia con el estado real.

Cómo funciona

import { useOptimistic, useState } from 'react';

function TodoList({ todos, addTodo }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (currentTodos, newTodo) => [...currentTodos, { ...newTodo, pending: true }]
  );

  const handleSubmit = async (formData) => {
    const newTodo = { text: formData.get('text'), id: Date.now() };
    addOptimisticTodo(newTodo);       // actualiza UI al instante
    await addTodo(newTodo);           // petición real al servidor
  };

  return (
    <ul>
      {optimisticTodos.map(todo => (
        <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

El nuevo elemento aparece inmediatamente en la lista con opacity: 0.5. Cuando addTodo resuelve, React sustituye el estado optimista por el real.

Si algo falla

Si la promesa rechaza, React revierte automáticamente al estado anterior. No necesitas gestionar el rollback manualmente.

try {
  await addTodo(newTodo);
} catch {
  // useOptimistic ya revirtió el estado por ti
  showError('No se pudo añadir la tarea');
}

Cuándo usarlo

• Likes y reacciones
• Añadir o eliminar elementos de una lista
• Toggles (marcar como leído, favorito...)
• Cualquier acción donde el éxito sea el caso más probable

useOptimistic hace que las apps se sientan instantáneas sin sacrificar la consistencia de datos. Es la forma que React 19 propone para implementar optimistic UI sin librerías externas.