Optimistic UI Patterns with Next.js Server Actions and Supabase Realtime

The difference between an app that feels fast and one that feels slow often isn't the actual latency — it's whether the UI responds before the server does. Optimistic updates show the expected result immediately, then reconcile with the server response. Done right, users barely notice network latency.

Next.js 15 ships useOptimistic as a stable React 19 hook, and it integrates cleanly with Server Actions. Combined with Supabase Realtime for multi-user sync, you can build interfaces that feel instant while staying consistent across clients.

Estimated read time: 13 minutes

Prerequisites

Next.js 15 (React 19) for stable useOptimistic
Supabase project with Realtime enabled
Familiarity with Server Actions and useTransition
TypeScript recommended

How `useOptimistic` Works

useOptimistic takes two arguments: the current real state, and an update function that produces the optimistic state. It returns the optimistic state (shown to the user) and a function to trigger an optimistic update.

const [optimisticState, addOptimistic] = useOptimistic(
  realState,
  (currentState, optimisticValue) => {
    // Return the new optimistic state
    return [...currentState, optimisticValue]
  }
)