React useFormState Doğrulama Motoru: Çok Aşamalı Form Doğrulamasına Derinlemesine Bir Bakış

Modern web geliştirme dünyasında, sezgisel ve sağlam kullanıcı deneyimleri oluşturmak çok önemlidir. Bu, kullanıcı etkileşimi için birincil geçit olan formlarda her şeyden daha kritiktir. Basit iletişim formları basit olsa da, çok aşamalı formlarla karmaşıklık hızla artar; kullanıcı kayıt sihirbazlarını, e-ticaret ödeme işlemlerini veya ayrıntılı yapılandırma panellerini düşünün. Bu çok adımlı işlemler, durum yönetimi, doğrulama ve kusursuz bir kullanıcı akışı sürdürmede önemli zorluklar sunar. Tarihsel olarak, geliştiriciler bu karmaşıklığı gidermek için karmaşık istemci tarafı durumu, bağlam sağlayıcıları ve üçüncü taraf kitaplıkları ile uğraşmışlardır.

React'in `useFormState` kancasına girin. React'in sunucu entegre bileşenlere doğru evriminin bir parçası olarak tanıtılan bu güçlü kanca, özellikle çok aşamalı formlar bağlamında, form durumunu ve doğrulamayı yönetmek için akıcı, zarif bir çözüm sunar. Doğrudan Sunucu Eylemleri ile entegre olarak, `useFormState` kodu basitleştiren, performansı artıran ve aşamalı geliştirmeyi savunan sağlam bir doğrulama motoru oluşturur. Bu makale, dünya çapındaki geliştiricilere, karmaşık bir görevi yönetilebilir ve ölçeklenebilir bir sürece dönüştürerek, `useFormState` kullanarak gelişmiş bir çok aşamalı doğrulama motorunu nasıl tasarlayacakları konusunda kapsamlı bir rehber sunmaktadır.

Çok Aşamalı Formların Kalıcı Zorluğu

Çözüme dalmadan önce, geliştiricilerin çok aşamalı formlarla karşılaştığı ortak sorunlu noktaları anlamak çok önemlidir. Bu zorluklar önemsiz değildir ve geliştirme süresinden son kullanıcı deneyimine kadar her şeyi etkileyebilir.

• Durum Yönetimi Karmaşıklığı: Bir kullanıcı adımlar arasında gezinirken verileri nasıl kalıcı hale getirirsiniz? Durum bir üst bileşende mi, genel bir bağlamda mı yoksa yerel depolamada mı yaşamalı? Her yaklaşımın, genellikle prop-drilling'e veya karmaşık durum senkronizasyon mantığına yol açan ödünleşimleri vardır.
• Doğrulama Mantığı Parçalanması: Doğrulama nerede gerçekleşmeli? Her şeyi sonunda doğrulamak, zayıf bir kullanıcı deneyimi sağlar. Her adımda doğrulamak daha iyidir, ancak bu genellikle hem istemcide (anında geri bildirim için) hem de sunucuda (güvenlik ve veri bütünlüğü için) parçalanmış doğrulama mantığı yazmayı gerektirir.
• Kullanıcı Deneyimi Engelleri: Bir kullanıcı, verilerini kaybetmeden adımlar arasında ileri geri hareket edebilmeyi bekler. Ayrıca net, bağlamsal hata mesajları ve anında geri bildirim beklerler. Bu akıcı deneyimi uygulamak önemli miktarda standart kod içerebilir.
• Sunucu-İstemci Durum Senkronizasyonu: Gerçeğin nihai kaynağı genellikle sunucudur. İstemci tarafı durumunu sunucu tarafı doğrulama kuralları ve iş mantığı ile mükemmel bir şekilde senkronize tutmak, genellikle yinelenen koda ve olası tutarsızlıklara yol açan sürekli bir savaştır.

Bu zorluklar, istemci ile sunucu arasındaki boşluğu dolduran daha entegre, uyumlu bir yaklaşıma duyulan ihtiyacı vurgulamaktadır. `useFormState` tam olarak burada parlıyor.

`useFormState`'e Giriş: Form İşlemeye Modern Bir Yaklaşım

`useFormState` kancası, bir form eyleminin sonucuna göre güncellenen form durumunu yönetmek için tasarlanmıştır. İstemcide JavaScript etkinleştirilmiş olsun veya olmasın sorunsuz bir şekilde çalışan aşamalı olarak geliştirilmiş uygulamalar için React vizyonunun temel taşıdır.

`useFormState` Nedir?

Temelinde `useFormState`, iki argüman alan bir React Hook'tur: bir sunucu eylem fonksiyonu ve bir başlangıç durumu. İki değer içeren bir dizi döndürür: formun geçerli durumu ve `

` öğenize geçirilecek yeni bir eylem fonksiyonu.

const [state, formAction] = useFormState(myServerAction, initialState);

Form her gönderildiğinde, React, `myServerAction`'ı önceki durum ve form verileriyle birlikte çağırır. `myServerAction`'ın döndürdüğü her ne ise yeni `state` olur. Bu basit ama güçlü desen, sunucunun doğrulama hataları, başarı mesajları veya diğer ilgili bilgiler dahil olmak üzere formun durumunu dikte etmesine olanak tanır.

Sunucu Eylemleriyle Entegrasyonun Gücü

Sunucu Eylemleri, sunucuda tanımlanabilen ancak istemciden çağrılabilen, istemci tarafı ve sunucu tarafı kodu arasındaki çizgileri güvenli ve verimli bir şekilde bulanıklaştıran fonksiyonlardır. `useFormState` ile birleştirildiğinde, kapalı bir döngü oluştururlar:

1. Kullanıcı bir form doldurur ve gönderir.
2. `useFormState` tarafından sağlanan `formAction` çağrılır ve bu da sunucu eylemini çağırır.
3. Sunucu eylemi form verilerini alır, doğrulama ve iş mantığını gerçekleştirir.
4. Sunucu eylemi yeni bir durum nesnesi döndürür (örneğin, `{ errors: { email: 'Geçersiz e-posta biçimi' } }`).
5. `useFormState` kancası, `state`'ini döndürülen nesneyle günceller ve yeniden oluşturmayı tetikler.
6. Kullanıcı arabirimi, sunucunun yanıtından doğrudan doğrulama hatalarını veya başarı mesajını görüntülemek için güncellenir.

Bu yaklaşım, doğrulama mantığını sunucuda merkezileştirerek veri bütünlüğünü sağlar ve istemci tarafı kod karmaşıklığını azaltır. Ayrıca aşamalı geliştirme ile mükemmel çalışır; JavaScript yüklenemezse, form gönderimi hala standart bir HTML form postası olarak çalışır.

Çok Aşamalı Doğrulama Motoru Oluşturma: Pratik Bir İnceleme

`useFormState`'in çok aşamalı bir doğrulama motoru olarak gücünü göstermek için pratik bir örnek oluşturalım. Amacımız, sağlam, kullanıcı dostu ve bakımı kolay üç adımlı bir kullanıcı kayıt formu oluşturmaktır.

Senaryo: Üç Adımlı Kullanıcı Kayıt Formu

• Adım 1: Kişisel Bilgiler - Kullanıcının adını ve e-posta adresini toplar.
• Adım 2: Şirket Detayları - Kullanıcının şirket adını ve rolünü toplar.
• Adım 3: Son Onay - Son gönderimden önce inceleme için toplanan tüm bilgileri görüntüler.

Proje Kurulumu ve Başlangıç Durumu

Öncelikle, formumuz için başlangıç durumunu ve sunucu eylemimiz için yapıyı tanımlayalım. Tüm formun durumunu, hangi adımın şu anda etkin olduğu da dahil olmak üzere tek bir nesnede yöneteceğiz.

`actions.js` gibi bir dosyada ('use server' ile işaretlenmiş):

// actions.js
'use server';

import { z } from 'zod'; // Popüler bir doğrulama kitaplığı

const schema = z.object({
name: z.string().min(2, 'Ad en az 2 karakter olmalıdır.'),
email: z.string().email('Geçersiz e-posta adresi.'),
companyName: z.string().min(3, 'Şirket adı gereklidir.'),
role: z.string().min(2, 'Rol gereklidir.'),
});

export async function onbordingAction(prevState, formData) {
const step = Number(formData.get('_step'));
const name = formData.get('name');
const email = formData.get('email');
const companyName = formData.get('companyName');
const role = formData.get('role');

const currentState = {
name, email, companyName, role,
};

// Her adım için mantık buraya gelecek...
return {
...prevState,
...currentState,
message: 'Varsayılan durum mesajı'
};
}

Ve ana bileşenimiz mevcut adımı yönetecek:

// OnboardingForm.jsx
'use client';

import { useFormState } from 'react-dom';
import { onbordingAction } from './actions';

const initialState = {
message: null,
errors: {},
step: 1,
};

export default function OnboardingForm() {
const [state, formAction] = useFormState(onbordingAction, initialState);

return (

{state.step === 1 && }
{state.step === 2 && }
{state.step === 3 && }

);
}

Adım 1: Kişisel Bilgileri Yakalama ve Doğrulama

Bu adımda, yalnızca `name` ve `email` alanlarını doğrulamak istiyoruz. Sunucu eylemimize hangi doğrulama mantığını çalıştıracağını söylemek için gizli bir girdi `_step` kullanacağız.

// Step1.jsx bileşeni
export function Step1({ state }) {
return (

);
}

Şimdi, Adım 1 için doğrulamayı işlemek üzere sunucu eylemimizi güncelleyelim.

// actions.js (güncellendi)
// ... (içeri aktarmalar ve şema tanımı)

export async function onbordingAction(prevState, formData) {
// ... (form verilerini al)
const step = Number(formData.get('_step'));

if (step === 1) {
const validatedFields = schema.pick({ name: true, email: true }).safeParse({ name, email });

if (!validatedFields.success) {
return {
...currentState,
step: 1,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Başarılı, sonraki adıma geç
return {
...currentState,
step: 2,
errors: {},
};
}
// ... (diğer adımlar için mantık)
}

Kullanıcı "İleri"yi tıkladığında, form gönderilir. Sunucu eylemi Adım 1 olduğunu kontrol eder, yalnızca Zod'un `pick` yöntemini kullanarak `name` ve `email` alanlarını doğrular ve yeni bir durum döndürür. Doğrulama başarısız olursa, hataları döndürür ve Adım 1'de kalır. Başarılı olursa, hataları temizler ve `step`i 2'ye günceller ve bu da ana `OnboardingForm` bileşenimizin `Step2` bileşenini oluşturmasına neden olur.

Adım 2: Şirket Detayları İçin Aşamalı Doğrulama

Bu yaklaşımın güzelliği, Adım 1'deki durumun otomatik olarak taşınmasıdır. Bir sonraki form gönderimine dahil edilmesi için gizli alanlarda oluşturmamız yeterlidir.

// Step2.jsx bileşeni
export function Step2({ state }) {
return (

);
}

Ve Adım 2'yi işlemek için sunucu eylemini güncelliyoruz.

// actions.js (güncellendi)
// ...
if (step === 2) {
const validatedFields = schema.pick({ companyName: true, role: true }).safeParse({ companyName, role });

if (!validatedFields.success) {
return {
...currentState,
step: 2,
errors: validatedFields.error.flatten().fieldErrors,
};
}

// Başarılı, son incelemeye geç
return {
...currentState,
step: 3,
errors: {},
};
}
// ...

Mantık, Adım 1 ile aynıdır, ancak Adım 2 için alanları hedefler. `useFormState` kancası, tüm verileri koruyarak ve temiz, aşamalı bir doğrulama akışı sağlayarak geçişi sorunsuz bir şekilde yönetir.

Adım 3: Son İnceleme ve Gönderim

Son adımda, kullanıcının incelemesi için toplanan tüm verileri görüntüleriz. Son gönderim, verileri bir veritabanına kaydetmeden önce tüm alanların kapsamlı bir şekilde doğrulanmasını tetikleyecektir.

// Step3.jsx bileşeni
export function Step3({ state }) {
return (

);
}

Son sunucu eylemi mantığı, tam bir doğrulama ve son iş mantığını gerçekleştirir.

// actions.js (son sürüm)
// ...
if (step === 3) {
// Son, tam doğrulama
const validatedFields = schema.safeParse({ name, email, companyName, role });

if (!validatedFields.success) {
// Adım adım doğrulama doğruysa olmamalıdır, ancak iyi bir koruma
return {
...currentState,
step: 1, // Kullanıcıyı hatalarla birlikte ilk adıma geri gönder
errors: validatedFields.error.flatten().fieldErrors,
message: 'Hata: Geçersiz veri bulundu. Lütfen inceleyin.'
};
}

try {
// console.log('Veritabanına gönderiliyor:', validatedFields.data);
// await saveToDatabase(validatedFields.data);
return { message: 'Başarılı! Kaydınız tamamlandı.', step: 4 }; // Son bir başarılı adım
} catch (dbError) {
return { ...currentState, step: 3, message: 'Hata: Veri kaydedilemedi.' };
}
}
// ...

Bununla birlikte, aşamalı, sunucu yetkili doğrulama ile eksiksiz, sağlam, çok aşamalı bir formumuz var ve tümü `useFormState` kancası tarafından temiz bir şekilde düzenleniyor.

Birinci Sınıf Bir Kullanıcı Deneyimi İçin Gelişmiş Stratejiler

İşlevsel bir form oluşturmak bir şeydir; kullanmaktan keyif almak başka bir şeydir. Çok aşamalı formlarınızı yükseltmek için bazı gelişmiş teknikler şunlardır.

Gezinmeyi Yönetme: İleri ve Geri Hareket Etme

Mevcut mantığımız yalnızca ileriye doğru hareket eder. Kullanıcıların geri gitmesine izin vermek için basit bir `type="submit"` düğmesi kullanamayız. Bunun yerine, adımı istemci tarafı bileşeninin durumunda yönetiriz ve form eylemini yalnızca ileriye doğru ilerleme için kullanırız. Bununla birlikte, sunucu merkezli modele bağlı kalan daha basit bir yaklaşım, formu farklı bir amaçla gönderen bir "Geri" düğmesine sahip olmaktır.

// Bir adım bileşeninde...
Geri
İleri

// Sunucu eyleminde...
const intent = formData.get('intent');
if (intent === 'back') {
return { ...currentState, step: step - 1, errors: {} };
}

`useFormStatus` ile Anında Geri Bildirim Sağlama

`useFormStatus` kancası, aynı `

` içindeki bir form gönderiminin bekleyen durumunu sağlar. Bu, düğmeleri devre dışı bırakmak ve yükleme spinner'ları göstermek için mükemmeldir ve özellikle daha yavaş ağ bağlantılarında iyi UX için çok önemlidir.

// SubmitButton.jsx
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton({ text }) {
const { pending } = useFormStatus();

return (

{pending ? 'Gönderiliyor...' : text}

);
}

Daha sonra adım bileşenlerinizde standart bir `` yerine `` kullanabilirsiniz.

Sunucu Eyleminizi Ölçeklenebilirlik İçin Yapılandırma

Formunuz büyüdükçe, sunucu eylemindeki `if/else if` zinciri hantal hale gelebilir. Daha iyi organizasyon için bir `switch` ifadesi veya daha modüler bir desen önerilir.

// Bir switch ifadesiyle actions.js
switch (step) {
case 1:
// Adım 1 doğrulamasını işle
break;
case 2:
// Adım 2 doğrulamasını işle
break;
// ... vb.
}

Erişilebilirlik (a11y) Tartışılmazdır

Küresel bir kitle için erişilebilirlik bir zorunluluktur. Formlarınızın erişilebilir olduğundan emin olun:

• Hata içeren girdi alanlarında `aria-invalid="true"` kullanma.
• `aria-describedby` kullanarak hata mesajlarını girdilere bağlama.
• Özellikle hatalar göründüğünde, gönderimden sonra odağı uygun şekilde yönetme.
• Tüm form kontrollerinin klavye ile gezilebilir olduğundan emin olma.

Küresel Bir Bakış Açısı: Uluslararasılaştırma ve `useFormState`

Sunucu odaklı doğrulamanın önemli avantajlarından biri, uluslararasılaştırma (i18n) kolaylığıdır. Doğrulama mesajlarının artık istemcide sabit kodlanması gerekmez. Sunucu eylemi, kullanıcının tercih ettiği dili (`Accept-Language` gibi başlıklar, bir URL parametresi veya bir kullanıcı profili ayarından) algılayabilir ve hataları kendi dilinde döndürebilir.

Örneğin, sunucuda `i18next` gibi bir kitaplık kullanma:

// i18n ile sunucu eylemi
import { i18n } from 'your-i18n-config';
// ...
const t = await i18n.getFixedT(userLocale); // örneğin, İspanyolca için 'es'

const schema = z.object({
email: z.string().email(t('errors.invalid_email')),
});

Bu yaklaşım, dünya çapındaki kullanıcıların net, anlaşılır geri bildirim almasını sağlayarak uygulamanızın kapsayıcılığını ve kullanılabilirliğini önemli ölçüde iyileştirir.

`useFormState` ve İstemci Tarafı Kitaplıkları: Karşılaştırmalı Bir Bakış

Bu model, Formik veya React Hook Form gibi yerleşik kitaplıklarla nasıl karşılaştırılır? Hangisinin daha iyi olduğu değil, iş için hangisinin doğru olduğu önemlidir.

• İstemci Tarafı Kitaplıkları (Formik, React Hook Form): Bunlar, anında istemci tarafı geri bildiriminin en yüksek öncelik olduğu karmaşık, yüksek oranda etkileşimli formlar için mükemmeldir. Form durumunu, doğrulamayı ve gönderimi tamamen tarayıcı içinde yönetmek için kapsamlı araç setleri sağlarlar. Temel zorlukları, istemci ve sunucu arasındaki doğrulama mantığının yinelenmesi olabilir.
• Sunucu Eylemleriyle `useFormState`: Bu yaklaşım, sunucunun gerçeğin nihai kaynağı olduğu durumlarda öne çıkar. Mantığı merkezileştirerek genel mimariyi basitleştirir, veri bütünlüğünü garanti eder ve aşamalı geliştirme ile sorunsuz bir şekilde çalışır. Ödünleşim, doğrulama için bir ağ gidiş dönüşüdür, ancak modern altyapı ile bu genellikle ihmal edilebilir düzeydedir.

Önemli iş mantığı içeren veya bir veritabanına karşı doğrulanması gereken verileri (örneğin, bir kullanıcı adının alınıp alınmadığını kontrol etme) içeren çok aşamalı formlar için, `useFormState` modeli daha doğrudan ve daha az hataya açık bir mimari sunar.

Sonuç: React'te Formların Geleceği

`useFormState` kancası, yeni bir API'den daha fazlasıdır; React'te formları nasıl oluşturduğumuza dair felsefi bir değişimi temsil eder. Sunucu merkezli bir modeli benimseyerek, daha sağlam, güvenli, erişilebilir ve bakımı daha kolay çok aşamalı formlar oluşturabiliriz. Bu model, durum senkronizasyonuyla ilgili tüm hata kategorilerini ortadan kaldırır ve karmaşık kullanıcı akışlarını işlemek için net, ölçeklenebilir bir yapı sağlar.

`useFormState` ile bir doğrulama motoru oluşturarak, yalnızca durumu yönetmekle kalmıyorsunuz; modern web geliştirme ilkelerine dayanan esnek, kullanıcı dostu bir veri toplama sürecini de tasarlıyorsunuz. Çeşitli, küresel bir kitle için uygulamalar geliştiren geliştiriciler için bu güçlü kanca, gerçekten birinci sınıf kullanıcı deneyimleri oluşturmak için temel sağlar.