useActionState dan useFormStatus

useActionState(action, initialState) adalah kait React 19 yang membungkus Tindakan Server untuk melacak statusnya di antara berbagai pengiriman. Kait ini menerima fungsi tindakan dan nilai status awal, lalu mengembalikan tuple yang dapat Anda gunakan untuk mengendalikan seluruh pengalaman formulir.

Kait tersebut mengembalikan [state, formAction, isPending]. state menyimpan nilai terbaru yang dikembalikan oleh tindakan, dimulai dari null atau nilai awal Anda. formAction adalah tindakan terbungkus yang diteruskan ke formulir. isPending bernilai true selama tindakan sedang dijalankan di server.

Setiap kali formulir dikirim, Tindakan Server dijalankan dan nilai yang dikembalikannya menjadi state baru. Pada render pertama, state sama dengan initialState. Hal ini memudahkan Anda menampilkan antarmuka pengguna yang berbeda, bergantung pada ada tidaknya pengiriman sebelumnya dan hasil yang dikembalikannya.

Jika Tindakan Server mengembalikan { errors: { email: 'Invalid email' } }, Anda dapat menampilkan kesalahan tersebut secara langsung: {state.errors?.email && <p>{state.errors.email}</p>}. Karena statusnya dipertahankan di antara render ulang, pesan kesalahan tetap terlihat sampai pengiriman berikutnya yang berhasil menggantikan status tersebut.

Ketika tindakan mengembalikan { success: true }, komponen dapat menampilkan pesan keberhasilan: {state?.success && <p>Form submitted!</p>}. Formulir dapat disembunyikan atau digantikan oleh pesan keberhasilan secara kondisional berdasarkan nilai status.

useFormStatus() adalah kait yang membaca status tertunda dari elemen <form> leluhur terdekat. Kait ini mengembalikan objek yang mencakup { pending: boolean }. Kait ini harus digunakan di dalam komponen yang merupakan anak formulir—bukan di dalam komponen yang merender formulir itu sendiri.

Pembatasan bahwa useFormStatus harus digunakan di dalam formulir diterapkan karena kait tersebut membaca konteks formulir dari pohon React di atasnya. Jika dipanggil di komponen yang sama dengan komponen yang merender formulir, kait tersebut akan menjadi saudara formulir, bukan turunannya, sehingga tidak dapat mengakses status formulir.

Pola standarnya adalah memisahkan tombol kirim menjadi komponen tersendiri: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }. Komponen ini kemudian ditempatkan di dalam formulir, sehingga dapat mengakses status tertunda formulir.

Menetapkan disabled={pending} pada tombol kirim mencegah pengiriman ganda. Ketika pengguna mengeklik tombol kirim dan Tindakan Server sedang dijalankan, pending bernilai true, sehingga tombol dinonaktifkan dan tidak dapat diklik. Setelah tindakan selesai, pending kembali ke false dan tombol aktif kembali.

Pola pengalaman pengguna formulir yang lengkap menggabungkan kedua kait: useActionState di komponen formulir melacak hasil tindakan dan menyediakan formAction, sedangkan useFormStatus di dalam komponen anak SubmitButton melacak status tertunda. Keduanya menyediakan tampilan kesalahan validasi dan tombol kirim yang responsif.

Untuk pengalaman yang lebih responsif, useOptimistic dipasangkan dengan useActionState. Anda segera memperbarui antarmuka pengguna dengan hasil yang diharapkan sebelum server merespons, lalu menyelaraskannya kembali ketika respons sebenarnya tiba. Pola ini umum digunakan pada tombol suka, daftar tugas, dan interaksi lain yang memerlukan umpan balik cepat.

Di mana useFormStatus harus dipanggil agar berfungsi dengan benar?

useActionState(action, initialState) mengembalikan [state, formAction, isPending] untuk melacak hasil Tindakan Server. Status tersebut menyimpan nilai yang dikembalikan tindakan, sehingga kesalahan dan keberhasilan dapat ditampilkan secara langsung. useFormStatus() menyediakan { pending } di dalam komponen anak formulir, sehingga tombol kirim dapat merespons dengan baik. Kedua kait tersebut bersama-sama membentuk pengalaman formulir yang lengkap dan aksesibel.