Reactjs Useoptimistic Deep Rollback Optimistic UI Form List

Definisi

useOptimistic (React 19, juga ada di canary/experimental sebelumnya) adalah hook untuk menampilkan state optimis saat menunggu aksi async selesai, lalu otomatis rollback ke nilai nyata bila aksi gagal/selesai. Penerus useTransition + manual state untuk optimistic UI.

Kapan dipakai

Pakai untuk interaksi "langsung terasa" seperti: kirim pesan chat, tambah item ke list, toggle like — di mana user sebaiknya lihat hasil sebelum server konfirmasi. Cocok dipakai bersama Server Action atau promise.

Cara kerja

Optimistic list

jsx

import { useOptimistic, useTransition } from 'react';
 
function Chat({ messages, send }) {
  const [optimistic, addOptimistic] = useOptimistic(
    messages,
    (state, newMsg) => [...state, { ...newMsg, pending: true }]
  );
  const [isPending, start] = useTransition();
 
  function onSubmit(text) {
    start(async () => {
      addOptimistic({ id: crypto.randomUUID(), text, pending: true });
      await send(text); // bila gagal, React rollback otomatis
    });
  }
  return optimistic.map(m => <li className={m.pending ? 'dim' : ''}>{m.text}</li>);
}

Struktur alur

Catatan implementasi

• useOptimistic tidak mengganti state utama; ia layer di atas messages dan merge saat pending.
• Harus di-dalam <form> atau dipanggil dalam startTransition agar React tahu batas optimis.
• Bila server mengembalikan data final, panggil setState nyata setelah await.
• Tag pending untuk beri feedback visual (opacity, spinner kecil).

Kesalahan umum

• Lupa bungkus di transition: optimistic tidak aktif.
• Tidak set pending flag: user tidak tahu mana yang belum terkonfirmasi.
• Rollback bingung: pastikan key/id stabil agar React cocokkan item.
• Optimistic di data kritis: hindari untuk transaksi finansial tanpa konfirmasi kuat.

Referensi terkait

• Optimistic UI dan Client Cache Revalidation Next.js
• Concurrent Features: useTransition, useDeferredValue, Suspense Data
• Next.js Forms, Zod Validation, Multipart