web-developmentOctober 18, 20267 min

Optimistic Cart with React 19 useOptimistic: No Lag, No Spinner

By Arash Latifi

Use useOptimistic to update cart optimistically — clicks feel instant, errors auto-revert, no manual state.

TL;DR: useOptimistic updates cart before server responds — no lag.

Why?

Before you needed useState + useTransition + manual rollback. Now one hook.

Implementation

Checklist

[ ] useOptimistic for list
[ ] startTransition for fetch
[ ] Error → auto reverts

FAQ

With Server Actions? Yes — form action can be a Server Action directly.

Conflicts with async params? No — client side.

Cost? Zero — built into React 19.

TSX

"use client";
import { useOptimistic, useTransition } from "react";

export function Cart({ items }: { items: { id: string; qty: number }[] }) {
  const [optimisticItems, addOptimistic] = useOptimistic(
    items,
    (state, newItem: { id: string; qty: number }) => [...state, newItem]
  );
  const [, startTransition] = useTransition();

  async function addItem(formData: FormData) {
    const newItem = { id: String(formData.get("id")), qty: 1 };
    addOptimistic(newItem); // instant
    await startTransition(async () => {
      await fetch("/api/cart", { method: "POST", body: formData });
    });
  }

  return (
    <>
      {optimisticItems.map((it) => (
        <div key={it.id}>{it.id} × {it.qty}</div>
      ))}
      <form action={addItem}>
        <input type="hidden" name="id" value="p1" />
        <button>Add</button>
      </form>
    </>
  );
}

The DevArt | Arash Latifi

Corporate & Personal

Medical & Real Estate

E-commerce

Cities

Optimistic Cart with React 19 useOptimistic: No Lag, No Spinner

Why?

Implementation

Checklist

FAQ

Optimistic Cart with React 19 useOptimistic: No Lag, No Spinner

Why?

Implementation

Checklist

FAQ