React useFormStatus Hook: Form Durum Yönetiminde Ustalık Rehberi
React uygulamalarınızda form gönderimleri sırasında kullanıcı deneyimini iyileştirmek ve durum yönetimini basitleştirmek mi istiyorsunuz? React’in sunduğu useFormStatus Hook’u, formların asenkron işlemleri sırasında yükleme, bekleyen durumları kolayca yönetmenize olanak tanır. Bu rehberde, useFormStatus‘u sıfırdan başlayarak ileri seviye kullanımlarına kadar tüm detaylarıyla keşfedeceğiz.
Modern web uygulamalarında formlar, kullanıcı etkileşiminin temel taşlarından biridir. Bir kullanıcının kayıt olması, ürün satın alması veya yorum göndermesi gibi pek çok kritik işlem, formlar aracılığıyla gerçekleşir. Ancak, bu formların gönderim süreçleri genellikle asenkron işlemleri içerir; yani verilerin sunucuya gönderilmesi, işlenmesi ve bir yanıtın beklenmesi zaman alabilir. İşte tam da bu noktada, form durum yönetiminin önemi ortaya çıkar. Kullanıcılar, bir form gönderdiklerinde ne olduğunu bilmek isterler. Acaba gönderim başarılı oldu mu? Veriler sunucuya ulaştı mı? Yoksa bir hata mı oluştu? Bu sorulara net yanıtlar sağlayamamak, kullanıcı deneyimini ciddi şekilde olumsuz etkileyebilir.
Form durumu yönetiminin yetersiz olduğu senaryolarda, kullanıcılar sıklıkla aşağıdaki sorunlarla karşılaşırlar:
- Belirsizlik: “Formu gönder düğmesine tıkladım ama hiçbir şey olmuyor gibi…” Bu durum, kullanıcıların uygulamanın donduğunu düşünmelerine veya sabırsızlanarak tekrar tekrar düğmeye tıklamalarına yol açabilir.
- Kötü Kullanıcı Deneyimi: Gönderim sırasında geri bildirim sağlanmaması, uygulamanın yavaş veya tepkisiz olduğu algısını yaratır. Bu da kullanıcı memnuniyetini düşürür.
- Veri Tutarsızlığı ve Hatalar: Kullanıcıların bekleyen bir gönderim sırasında aynı formu tekrar göndermeye çalışması, yinelenen veri girişlerine veya istenmeyen hatalara yol açabilir. Örneğin, bir sipariş formunun iki kez gönderilmesi, çift sipariş oluşturabilir.
- Erişilebilirlik Sorunları: Ekran okuyucu kullananlar veya klavye ile gezinmeyi tercih edenler için durum değişikliklerinin açıkça belirtilmemesi, uygulamanın kullanımını zorlaştırır.
Bu sorunları aşmak ve kullanıcı dostu, güvenilir formlar oluşturmak için, formun gönderim anındaki durumunu (bekliyor, gönderiliyor, başarılı, başarısız) yönetmek hayati önem taşır. Geleneksel React yaklaşımlarında, bu durumları yönetmek için genellikle useState gibi Hook’lar kullanılır ve manuel olarak loading veya submitting gibi durum değişkenleri tanımlanır. Örneğin, bir isLoading state’i tanımlayıp, formu göndermeden önce true, işlem bittikten sonra false yapmak gerekir. Ancak bu yöntem, özellikle karmaşık formlarda veya birden fazla formun olduğu uygulamalarda kod tekrarına ve yönetim zorluğuna yol açabilir.
React 18 ve sonrası ile hayatımıza giren Server Components ve Server Actions, form yönetiminde yeni bir paradigma sunuyor. Bu yeni yaklaşım, form gönderimlerini doğrudan sunucu tarafında işleyerek client-side JavaScript yükünü azaltırken, aynı zamanda form durum yönetimi için daha entegre çözümler sunuyor. İşte bu noktada useFormStatus Hook’u, Server Actions ile çalışan formların durumunu client tarafında takip etmek için mükemmel bir köprü görevi görüyor. Bu sayede, formların mevcut durumunu izlemek ve buna göre UI güncellemeleri yapmak çok daha kolay, temiz ve React ekosistemiyle uyumlu hale geliyor.
useFormStatus Hook Nedir ve Nasıl Çalışır?
useFormStatus Hook’u, React uygulamalarınızda formların gönderim durumunu izlemek için tasarlanmış özel bir Hook’tur. Özellikle React’in Server Actions özelliği ile birlikte kullanıldığında parlar ve form gönderimlerindeki asenkron durumları (yükleniyor, bekliyor gibi) basit ve etkili bir şekilde yönetmenizi sağlar. Temel amacı, bir
);
}
Yukarıdaki örnekte RegistrationForm bir Client Component'tir. useFormStatus Hook'unu kullanabilmek için, bu Hook'u formun doğrudan alt elemanı olan veya bir şekilde formun içerisinde render edilen bir *başka* Client Component'te çağırmamız gerektiğini görebilirsiniz. SubmitButton bileşeni tam da bu amaçla oluşturuldu.
2. SubmitButton Bileşenini İnceleme:
SubmitButton fonksiyon bileşeni içerisinde useFormStatus() çağrılır ve döndürülen nesneden pending özelliği destructure edilir.
const { pending } = useFormStatus();
Bu pending değişkeni, formun o an bir gönderim işlemi yürütüp yürütmediğini true veya false olarak tutar.
Daha sonra, bu pending durumunu düğmenin disabled özelliğine bağlıyoruz:
Eğer pending true ise (yani form gönderiliyor ise), düğme devre dışı bırakılır ve metni "Kaydediliyor..." olarak değişir. Bu, kullanıcının aynı formu birden fazla kez göndermesini engellerken, aynı zamanda görsel olarak bir geri bildirim sağlar. İşlem tamamlandığında (pending false olduğunda), düğme tekrar aktif hale gelir ve metni "Kayıt Ol" olur.
3. Nasıl Çalıştığını Anlama:
Kullanıcı "Kayıt Ol" düğmesine tıkladığında:
- React, formun
actionözelliğinde belirtilenhandleSubmitfonksiyonunu (ve dolayısıylaregisterUserServer Action'ını) tetikler. registerUserServer Action'ı çalışmaya başladığı anda,useFormStatusHook'u tarafından izlenen formunpendingdurumu otomatik olaraktrueolur.SubmitButtonbileşeni,pendingdurumununtrueolması nedeniyle yeniden render edilir. Düğme devre dışı kalır ve metni değişir.registerUserServer Action'ı (yapay 2 saniyelik gecikme dahil) tamamlandığında,pendingdurumu otomatik olarakfalseolur.SubmitButtontekrar render edilir, düğme etkin hale gelir ve orijinal metnine döner.
Bu basit örnek, useFormStatus'un form gönderim durumlarını yönetmek için ne kadar güçlü ve kullanımı kolay bir araç olduğunu göstermektedir. Manuel useState yönetimi gereksinimini ortadan kaldırarak kodu daha temiz ve okunabilir hale getirir.
Gerçek Dünya Senaryolarında useFormStatus: Vaka Analizi
useFormStatus Hook'u, sadece basit düğmeleri devre dışı bırakmaktan çok daha fazlasını yapabilir. Gerçek dünya uygulamalarında, kullanıcı deneyimini önemli ölçüde iyileştiren karmaşık form etkileşimlerini yönetmek için kullanılabilir. Şimdi, bir kullanıcı kayıt formunu ele alarak, asenkron işlemler sırasında yükleme durumu, hata mesajları ve genel kullanıcı geri bildirimini nasıl yöneteceğimizi gösteren bir vaka analizi yapalım. Bu senaryoda, bir kullanıcının kayıt olma girişimi sırasında bekleyen durumu, başarılı veya başarısız sonuçları görsel olarak nasıl sunabileceğimizi inceleyeceğiz.
Vaka Analizi: Gelişmiş Kullanıcı Kayıt Formu
Amacımız, bir kullanıcı kayıt formunda şunları sağlamaktır:
- Form gönderimi sırasında bir yükleme göstergesi (spinner) göstermek.
- Gönderim sırasında formdaki tüm giriş alanlarını devre dışı bırakmak.
- Başarılı veya başarısız bir kayıt işleminden sonra kullanıcıya uygun bir mesaj göstermek.
- Form gönderiminin sonucunu (başarı/hata) izlemek.
Bu senaryo için useFormStatus'a ek olarak, formun gönderim sonucunu izlemek ve hata/başarı mesajlarını göstermek için useActionState (önceki adı useFormState) Hook'unu da kullanacağız. useActionState, bir Server Action'ın sonucunu ve önceki durumunu yönetmek için idealdir.
İlk olarak, Server Action'ımızı güncelleyelim:
// app/actions.js - Güncellenmiş Sunucu tarafı action
"use server";
export async function registerUserAdvanced(previousState, formData) {
await new Promise((resolve) => setTimeout(resolve, 2500)); // Yapay gecikme
const username = formData.get("username");
const email = formData.get("email");
const password = formData.get("password");
console.log("Kullanıcı kaydediliyor (Gelişmiş):", { username, email, password });
// Basit doğrulama ve iş mantığı
if (!username || !email || !password) {
return { success: false, message: "Tüm alanlar doldurulmalıdır." };
}
if (username === "testuser") {
return { success: false, message: "Bu kullanıcı adı zaten kullanımda." };
}
// Başarılı senaryo
return { success: true, message: "Kayıt işlemi başarıyla tamamlandı!" };
}Şimdi, bu action'ı kullanacak gelişmiş RegistrationForm bileşenini oluşturalım:
// app/components/AdvancedRegistrationForm.jsx - Client Component "use client"; import { useFormStatus, useActionState } from "react-dom"; import { registerUserAdvanced } from "../actions"; import { useEffect, useRef } from "react"; // Form alanlarını ve butonu içeren Client Component function FormContent({ actionStatus }) { const { pending } = useFormStatus(); // Formun gönderim durumunu izler const formRef = useRef(null); // Başarılı bir gönderim sonrası formu sıfırlamak için useEffect(() => { if (actionStatus?.success) { formRef.current?.reset(); } }, [actionStatus]); return (}> {actionStatus.message} )} {/* CSS for spinner - Konsept için basit bir stil */} ); } // Ana Client Component (useActionState'i içerir) export default function AdvancedRegistrationForm() { const [actionStatus, formAction] = useActionState(registerUserAdvanced, null); return (); }Yeni Bir Hesap Oluşturun
{/* action özelliğini FormContent'e aktarıyoruz */}
Bu örnekte, AdvancedRegistrationForm ana client bileşenidir. useActionState Hook'unu kullanarak registerUserAdvanced Server Action'ını formAction olarak tanımladık ve bunun sonucunu actionStatus değişkeninde tutuyoruz.
useActionState Hook'u, formun gönderim sonucunu (başarılı/hatalı) ve varsa hata mesajını yönetmek için idealdir. useFormStatus ise sadece gönderim anındaki "bekleyen" durumu izler. Bu iki Hook'u bir arada kullanmak, eksiksiz bir form durumu yönetimi sağlar.
FormContent bileşeni ise