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