Optimisasi React 19 Server Actions: Pola useActionState dan useFormStatus Praktis 2026

Ringkasan singkat

Gabungkan useActionState dan useFormStatus untuk menjadikan status form stabil, mencegah submit ganda, dan mempercepat debugging.

Server Actions di React 19 membuat alur submit lebih konsisten karena validasi, persistence, dan pengembalian state dikendalikan dalam satu kontrak server.

1. Model dasar

useActionState menghasilkan state, formAction, pending.

const [state, formAction, pending] = useActionState(updateProfile, { ok: false, message: '', fieldErrors: {}, globalErrors: [], })

• state: hasil server yang sudah distandarisasi
• formAction: handler form
• pending: indikator kirim sedang berjalan

2. Kontrak state tunggal

Semua form harus memakai bentuk yang sama.

type ActionState = { ok: boolean message: string fieldErrors: Record globalErrors: string[] }

Jaga agar field names stabil agar QA dan frontend tests tidak berantakan.

3. Tugas useFormStatus

'use client' import { useFormStatus } from 'react-dom'

function SubmitBtn() { const { pending } = useFormStatus() return {pending ? 'Mengirim...' : 'Kirim'} }

Komponen ini harus di dalam tree form. Jika di luar, pending tidak bekerja.

4. Pola anti-duplicate

1. 1disable tombol saat pending
2. 2kirim idempotency token tersembunyi
3. 3verifikasi token di server
4. 4kembalikan pesan duplicate secara eksplisit

Pada halaman pembayaran dan booking pola ini menahan lonjakan order ganda.

5. Insight tim

Langkah paling bernilai adalah menyepakati state schema terlebih dahulu. Setelah itu, tim dapat berfokus pada business logic, bukan debugging state layout.

6. Daftar rollout

• Mulai dari form stabil
• Terapkan schema dan submit UX
• Tambah metric log pada id token
• Observasi 48 jam untuk rerata duplicate dan first-success

FAQ

Q1. Apakah perlu menulis ulang semua form? A1. Tidak, mulai bertahap dari form prioritas.

Q2. Bisa tetap memakai API Route? A2. Bisa, selama mapping hasil tetap konsisten.

Q3. Bagaimana mencegah mismatch state? A3. Terapkan satu schema, dan jangan mengubah nama key.

Q4. Bagaimana jika pending tidak berubah? A4. Cek apakah formAction terpasang benar dan berada di form.

Q5. Apakah SEO terganggu? A5. Tidak jika title, description, dan internal link tetap dijaga.

Q6. Metrik apa yang penting? A6. Duplicate submit rate, latency P95, tingkat sukses pertama.

Tautan internal

• Next.js 15 App Router performance
• React 19 Server Components migration
• Cloudflare D1 vs Supabase
• Cloudflare Workers AI comparison

Tautan eksternal

• https://react.dev/reference/react-dom/hooks/useActionState
• https://react.dev/reference/react-dom/hooks/useFormStatus