Implementing Optimistic Updates

Optimistic UI Updates with useOptimistic

1. Shows anticipated result immediately
2. Reverts to actual state when async completes
3. Provides better UX than waiting for server
4. Works with startTransition for async operations

import { useOptimistic, startTransition } from 'react';

function MessageList({ messages, sendMessage }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, { ...newMessage, sending: true }]
  );

  const handleSend = async (text) => {
    addOptimisticMessage({ id: Date.now(), text });

    startTransition(async () => {
      await sendMessage(text);
    });
  };

  return (
    <ul>
      {optimisticMessages.map((msg) => (
        <li key={msg.id}>
          {msg.text} {msg.sending && <small>(Sending...)</small>}
        </li>
      ))}
    </ul>
  );
}

function LikeButton({ postId, initialLikes }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    initialLikes,
    (state, amount) => state + amount
  );

  const handleLike = async () => {
    addOptimisticLike(1);

    startTransition(async () => {
      await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
    });
  };

  return (
    <button
      ❤️ {optimisticLikes}
    </button>
  );
}

For comprehensive useOptimistic documentation, see: research/react-19-comprehensive.md lines 182-240.

NEVER

• Mutate state directly in update function
• Use for critical operations that must succeed
• Skip error handling for failed optimistic updates

If handling Prisma transaction errors in optimistic updates, use the handling-transaction-errors skill from prisma-6 for graceful P-code error handling.