← Next.js34 / 57
Optimistic UI dengan useOptimistic
Hook useOptimistic memperbarui daftar UI secara instan saat form dikirim sebelum Server Action selesai memprosesnya.
👀 Contoh dulu
const [optimisticItems, addOptimisticItem] = useOptimistic(items, (state, newOne) => [...state, newOne]);
Hasilnya: User melihat item bertambah di daftar tanpa jeda loading.
💡 Jika server action gagal, tampilan otomatis di-rollback ke state semula.
📝 Sekarang giliranmu
Agar antarmuka terasa instan, deklarasikan hook yang memberikan umpan balik 'optimistis' sebelum server merespon. Gunakan array destrukturisasi untuk mengambil [optimisticData, setOptimistic] dengan memanggil useOptimistic() dan berikan variabel data sebagai argumennya.
Preview