useOptimistic

import { useOptimistic, useActionState } from 'react';

function LikeButton({ initialLikes, postId }: { initialLikes: number; postId: string }) {
  const [likes, submitAction, isPending] = useActionState(
    async (prev: number) => {
      await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
      return prev + 1;
    },
    initialLikes,
  );

  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (current: number) => current + 1,
  );

  return (
    <form action={() => {
      addOptimisticLike(null);
      submitAction();
    }}>
      <button type="submit">
        ❤️ {optimisticLikes}
      </button>
    </form>
  );
}

import { useOptimistic } from 'react';

interface Todo { id: string; text: string; sending?: boolean }

function TodoList({ todos, addTodo }: {
  todos: Todo[];
  addTodo: (text: string) => Promise<void>;
}) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic<Todo[], string>(
    todos,
    (state, newText) => [
      ...state,
      { id: 'temp-' + Date.now(), text: newText, sending: true },
    ],
  );

  async function handleSubmit(formData: FormData) {
    const text = formData.get('text') as string;
    addOptimisticTodo(text);
    await addTodo(text);
  }

  return (
    <div>
      <form action={handleSubmit}>
        <input name="text" placeholder="Add todo..." />
        <button type="submit">Add</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} style={{ opacity: todo.sending ? 0.6 : 1 }}>
            {todo.text} {todo.sending && '(saving...)'}
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useOptimistic } from 'react';

interface Message {
  id: string;
  text: string;
  status: 'sent' | 'delivered' | 'sending';
}

function Chat({ messages, sendMessage }: {
  messages: Message[];
  sendMessage: (text: string) => Promise<void>;
}) {
  const [optimisticMessages, addOptimistic] = useOptimistic<Message[], string>(
    messages,
    (state, newText) => [
      ...state,
      { id: `temp-${Date.now()}`, text: newText, status: 'sending' as const },
    ],
  );

  async function handleSend(formData: FormData) {
    const text = formData.get('message') as string;
    addOptimistic(text);
    await sendMessage(text);
  }

  return (
    <div>
      {optimisticMessages.map(msg => (
        <div key={msg.id} style={{ opacity: msg.status === 'sending' ? 0.5 : 1 }}>
          {msg.text}
          <span style={{ fontSize: 10, marginLeft: 8 }}>
            {msg.status === 'sending' ? '⏳' : msg.status === 'delivered' ? '✓✓' : '✓'}
          </span>
        </div>
      ))}
      <form action={handleSend}>
        <input name="message" />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}