useOptimistic - Show instant UI feedback while async actions complete

"use client";
 
import { useOptimistic } from "react";
 
type Message = { id: string; text: string; sending?: boolean };
 
function Chat({
  messages,
  sendMessage,
}: {
  messages: Message[];
  sendMessage: (text: string) => Promise<void>;
}) {
  const [optimisticMessages, addOptimistic] = useOptimistic(
    messages,
    (state, newText: string) => [
      ...state,
      { id: "temp-" + Date.now(), text: newText, sending: true },
    ]
  );
 
  async function handleSubmit(formData: FormData) {
    const text = formData.get("text") as string;
    addOptimistic(text);
    await sendMessage(text);
  }
 
  return (
    <div>
      <ul>
        {optimisticMessages.map((msg) => (
          <li key={msg.id} className={msg.sending ? "opacity-50" : ""}>
            {msg.text}
            {msg.sending && " (sending...)"}
          </li>
        ))}
      </ul>
      <form action={handleSubmit}>
        <input name="text" required />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

// A todo list with optimistic add, toggle, and delete
"use client";
 
import { useOptimistic, useActionState, useRef } from "react";
 
type Todo = {
  id: string;
  text: string;
  completed: boolean;
  pending?: boolean;
  deleting?: boolean;
};
 
// Simulate server actions
async function serverAddTodo(text: string): Promise<Todo> {
  await new Promise((r) => setTimeout(r, 1000));
  return { id: crypto.randomUUID(), text, completed: false };
}
 
async function serverToggleTodo(id: string): Promise<void> {
  await new Promise((r) => setTimeout(r, 500));
}
 
async function serverDeleteTodo(id: string): Promise<void> {
  await new Promise((r) => setTimeout(r, 500));
}
 
type OptimisticAction =
  | { type: "add"; text: string }
  | { type: "toggle"; id: string }
  | { type: "delete"; id: string };
 
export default function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
  const [todos, setTodos] = useActionState(
    async (_prev: Todo[], formData: FormData) => {
      const text = formData.get("text") as string;
      addOptimistic({ type: "add", text });
      const newTodo = await serverAddTodo(text);
      return [..._prev, newTodo];
    },
    initialTodos
  );
 
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state: Todo[], action: OptimisticAction) => {
      switch (action.type) {
        case "add":
          return [...state, { id: "temp", text: action.text, completed: false, pending: true }];
        case "toggle":
          return state.map((t) =>
            t.id === action.id ? { ...t, completed: !t.completed, pending: true } : t
          );
        case "delete":
          return state.map((t) =>
            t.id === action.id ? { ...t, deleting: true } : t
          );
      }
    }
  );
 
  const formRef = useRef<HTMLFormElement>(null);
 
  async function handleToggle(id: string) {
    addOptimistic({ type: "toggle", id });
    await serverToggleTodo(id);
  }
 
  async function handleDelete(id: string) {
    addOptimistic({ type: "delete", id });
    await serverDeleteTodo(id);
  }
 
  return (
    <div className="max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-4">Todos</h1>
 
      <ul className="space-y-2">
        {optimisticTodos
          .filter((t) => !t.deleting)
          .map((todo) => (
            <li
              key={todo.id}
              className={`flex items-center gap-2 ${todo.pending ? "opacity-50" : ""}`}
            >
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => handleToggle(todo.id)}
              />
              <span className={todo.completed ? "line-through" : ""}>{todo.text}</span>
              <button onClick={() => handleDelete(todo.id)} className="ml-auto text-red-500">
                Delete
              </button>
            </li>
          ))}
      </ul>
 
      <form ref={formRef} action={async (formData) => {
        const text = formData.get("text") as string;
        addOptimistic({ type: "add", text });
        formRef.current?.reset();
        const newTodo = await serverAddTodo(text);
        // In a real app, revalidation would update the todos
      }}>
        <div className="flex gap-2 mt-4">
          <input name="text" required className="border p-2 rounded flex-1" />
          <button type="submit" className="bg-blue-500 text-white px-4 rounded">Add</button>
        </div>
      </form>
    </div>
  );
}

function LikeButton({ isLiked, onToggle }: { isLiked: boolean; onToggle: () => Promise<void> }) {
  const [optimisticLiked, setOptimisticLiked] = useOptimistic(isLiked);
 
  return (
    <form action={async () => {
      setOptimisticLiked(!optimisticLiked);
      await onToggle();
    }}>
      <button type="submit">{optimisticLiked ? "Unlike" : "Like"}</button>
    </form>
  );
}

"use client";
 
import { useActionState, useOptimistic } from "react";
import { addToCart } from "./actions";
 
function CartButton({ count }: { count: number }) {
  const [serverCount, action, isPending] = useActionState(addToCart, count);
  const [optimisticCount, setOptimisticCount] = useOptimistic(serverCount);
 
  return (
    <form action={async (formData) => {
      setOptimisticCount((c) => c + 1);
      await action(formData);
    }}>
      <button type="submit">Add to Cart ({optimisticCount})</button>
    </form>
  );
}