useActionState ve useFormStatus

useActionState(action, initialState), bir Sunucu Eylemini sarmalayarak gönderimler arasındaki durumunu izleyen bir React 19 kancasıdır. Eylem işlevini ve başlangıç durumu değerini alır ve form deneyiminin tamamını yönlendirmek için kullanabileceğiniz bir demet döndürür.

Kanca [state, formAction, isPending] değerini döndürür. state, eylemin en son döndürdüğü değeri tutar; başlangıçta null veya başlangıç değerinizdir. formAction, forma aktaracağınız sarmalanmış eylemdir. isPending, eylem sunucuda yürütülürken true değerindedir.

Form her gönderildiğinde Sunucu Eylemi çalışır ve döndürdüğü değer yeni state olur. İlk oluşturma sırasında state, initialState değerine eşittir. Bu, daha önce gönderim yapılıp yapılmadığına ve gönderimlerin ne döndürdüğüne bağlı olarak farklı arayüzler göstermeyi kolaylaştırır.

Sunucu Eylemi { errors: { email: 'Invalid email' } } döndürürse hatayı satır içinde görüntüleyebilirsiniz: {state.errors?.email && <p>{state.errors.email}</p>}. Durum yeniden oluşturma işlemleri arasında korunduğu için hata iletisi, bir sonraki başarılı gönderim durumu değiştirene kadar görünür kalır.

Eylem { success: true } döndürdüğünde bileşen bir başarı iletisi oluşturabilir: {state?.success && <p>Form submitted!</p>}. Form, durum değerine bağlı olarak koşullu şekilde gizlenebilir veya başarı iletisiyle değiştirilebilir.

useFormStatus(), en yakın üst <form> öğesinin bekleme durumunu okuyan bir kancadır. { pending: boolean } dahil olmak üzere bir nesne döndürür. Bu kanca, formu oluşturan bileşenin kendisinde değil, formun alt bileşeni olan bir bileşenin içinde kullanılmalıdır.

useFormStatus kancasının formun içinde kullanılması zorunludur; çünkü kanca formun bağlamını kendisinin üstündeki React ağacından okur. Formu oluşturan bileşenin içinde çağrılırsa formun alt öğesi değil, formun kardeşi olur ve formun durumuna erişemez.

Standart yaklaşım, gönderme düğmesini kendi bileşenine ayırmaktır: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }. Ardından bu bileşen formun içine yerleştirilir ve formun bekleme durumuna erişmesi sağlanır.

Gönderme düğmesinde disabled={pending} ayarını yapmak, yinelenen gönderimleri önler. Kullanıcı gönderme düğmesine tıkladığında ve Sunucu Eylemi yürütülürken pending değeri true olur; düğme devre dışı kalır ve tıklanamaz. Eylem tamamlandığında pending yeniden false olur ve düğme tekrar etkinleşir.

Tam form kullanıcı deneyimi kalıbı her iki kancayı birleştirir: Form bileşenindeki useActionState eylem sonucunu izler ve formAction değerini sağlarken, alt bileşen olan SubmitButton içindeki useFormStatus bekleme durumunu izler. Birlikte, doğrulama hatalarının görüntülenmesini ve duyarlı bir gönderme düğmesini sağlarlar.

Daha da duyarlı bir deneyim için useOptimistic, useActionState ile birlikte kullanılabilir. Sunucu yanıt vermeden önce beklenen sonuçla arayüzü hemen günceller, ardından gerçek yanıt geldiğinde durumu uzlaştırırsınız. Bu yaklaşım beğenme düğmelerinde, görev listelerinde ve hızlı geri bildirim gerektiren diğer etkileşimlerde yaygındır.

Doğru çalışması için useFormStatus nerede çağrılmalıdır?

useActionState(action, initialState), Sunucu Eylemi sonuçlarını izlemek için [state, formAction, isPending] değerini döndürür. Durum, eylemin döndürdüğü değeri tutarak satır içi hata ve başarı iletilerinin görüntülenmesini sağlar. useFormStatus(), formun alt bileşenleri içinde { pending } değerini sağlayarak duyarlı gönderme düğmelerinin oluşturulmasına olanak tanır. Her iki kanca birlikte eksiksiz ve erişilebilir bir form deneyimi oluşturur.