LearnNext
Back to Dashboard

Optimistic Updates

Membangun UI yang terasa instan dan responsif dengan hook useOptimistic dari React 19.

1. The "Zero Latency" UX

Optimistic UI adalah pola di mana aplikasi langsung memperbarui tampilan sebelum data benar-benar tersimpan di server. Jika request gagal, aplikasi akan mengembalikan tampilan ke kondisi semula secara otomatis.

components/Chat.tsx
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage: string) => [
    ...state,
    { id: Date.now().toString(), text: newMessage, sending: true }
  ]
);

async function action(formData: FormData) {
  const message = formData.get("message") as string;
  addOptimisticMessage(message); // UI langsung update!
  await sendMessage(message); // Request ke server (lama)
}

Interactive Demo: Instant Chat

Bandingkan sensasi mengirim pesan dengan dan tanpa Optimistic UI. Kami mensimulasikan delay server selama 2 detik.

Optimistic Room

Server Sync Active
React 19 Feature
Halo! Selamat belajar Next.js.
Optimistic State
Persisted State
CONSOLE: >>> IDLE

2. Key Benefits

Perceived Performance

User merasa aplikasi sangat cepat karena feedback diberikan seketika setelah tombol ditekan.

Automatic Rollback

React 19 menangani pembatalan state jika Server Action error, Anda tidak perlu menulis logika undo manual.

Use with Server Actions

Hook ini dirancang khusus untuk bekerja bersama Server Actions. Ia akan menjaga state "optimis" selama durasi eksekusi server action.