Gelişmiş form doğrulaması için React'in experimental_useFormState hook'unu keşfedin. Bu kılavuz, uygulama, faydalar ve gerçek dünya örneklerini kapsar.
React experimental_useFormState Doğrulaması: Gelişmiş Form Validasyonu
Form doğrulaması, modern web uygulaması geliştirmenin kritik bir yönüdür. Veri bütünlüğünü sağlar, kullanıcı deneyimini iyileştirir ve hataların sisteminize yayılmasını önler. React, bileşen tabanlı mimarisiyle, form yönetimi ve doğrulama için çok sayıda yaklaşım sunar. React'te deneysel bir özellik olarak sunulan experimental_useFormState hook'u, doğrudan sunucu eylemleri içinde form durumunu ve doğrulamayı yönetmek için güçlü ve modern bir yol sunarak aşamalı geliştirmeyi ve daha akıcı bir kullanıcı deneyimini mümkün kılar.
experimental_useFormState'i Anlamak
experimental_useFormState hook'u, özellikle sunucu eylemleriyle etkileşimde bulunurken form durumunu yönetme sürecini basitleştirmek için tasarlanmıştır. Başka bir deneysel özellik olan sunucu eylemleri, sunucuda doğrudan React bileşenlerinizden çağrılabilen fonksiyonlar tanımlamanıza olanak tanır. experimental_useFormState, bir sunucu eyleminin sonucuna göre form durumunu güncellemek için bir mekanizma sağlayarak gerçek zamanlı doğrulama ve geri bildirimi kolaylaştırır.
Temel Avantajları:
- Basitleştirilmiş Form Yönetimi: Form durumunu ve doğrulama mantığını bileşen içinde merkezileştirir.
- Sunucu Taraflı Doğrulama: Veri bütünlüğünü ve güvenliği sağlayarak sunucuda doğrulama yapılmasına olanak tanır.
- Aşamalı Geliştirme: JavaScript devre dışı bırakıldığında bile sorunsuz çalışır ve temel bir form gönderme deneyimi sunar.
- Gerçek Zamanlı Geri Bildirim: Doğrulama sonuçlarına göre kullanıcıya anında geri bildirim sağlar.
- Daha Az Standart Kod: Form durumu ve doğrulamayı yönetmek için gereken kod miktarını en aza indirir.
experimental_useFormState'i Uygulamak
experimental_useFormState'i uygulamanın pratik bir örneğine dalalım. Temel doğrulama kurallarıyla (örneğin, zorunlu alanlar, e-posta formatı) basit bir kayıt formu oluşturacağız. Bu örnek, form verilerini doğrulamak için hook'un bir sunucu eylemiyle nasıl entegre edileceğini gösterecektir.
Örnek: Kayıt Formu
Öncelikle, form gönderimini ve doğrulamasını yönetecek bir sunucu eylemi tanımlayalım. Bu eylem, form verilerini alacak ve doğrulama başarısız olursa bir hata mesajı döndürecektir.
// server-actions.js (Bu sadece bir temsildir. Sunucu eylemlerinin kesin uygulaması, kullanılan framework'e göre değişir.)
"use server";
export async function registerUser(prevState, formData) {
const name = formData.get('name');
const email = formData.get('email');
const password = formData.get('password');
// Basit doğrulama
if (!name) {
return { message: 'İsim gerekli' };
}
if (!email || !email.includes('@')) {
return { message: 'Geçersiz e-posta formatı' };
}
if (!password || password.length < 8) {
return { message: 'Şifre en az 8 karakter olmalıdır' };
}
// Kullanıcı kaydını simüle et
await new Promise(resolve => setTimeout(resolve, 1000)); // API çağrısını simüle et
return { message: 'Kayıt başarılı!' };
}
Şimdi, formu yönetmek ve sunucu eylemiyle etkileşimde bulunmak için experimental_useFormState'i kullanan React bileşenini oluşturalım.
// RegistrationForm.jsx
'use client';
import React from 'react';
import { experimental_useFormState as useFormState } from 'react-dom';
import { registerUser } from './server-actions';
function RegistrationForm() {
const [state, formAction] = useFormState(registerUser, { message: null });
return (
);
}
export default RegistrationForm;
Açıklama:
experimental_useFormStateveregisterUsersunucu eylemini içe aktarıyoruz.useFormState(registerUser, { message: null })hook'u başlatır. İlk argüman sunucu eylemi, ikincisi ise başlangıç durumudur. Bu durumda, başlangıç durumununnullolarak ayarlanmış birmessageözelliği vardır.- Hook, mevcut durumu (
state) ve sunucu eylemini tetikleyecek bir fonksiyonu (formAction) içeren bir dizi döndürür. <form>elemanınınactionözelliğiformActionolarak ayarlanır. Bu, React'e form gönderildiğinde sunucu eylemini kullanmasını söyler.state?.message, sunucu eyleminden döndürülen herhangi bir hata veya başarı mesajını görüntülemek için koşullu olarak oluşturulur.
Gelişmiş Doğrulama Teknikleri
Önceki örnek temel doğrulamayı gösterse de, daha karmaşık doğrulama tekniklerini birleştirebilirsiniz. İşte bazı gelişmiş stratejiler:
- Düzenli İfadeler (Regular Expressions): Telefon numaraları, posta kodları veya kredi kartı numaraları gibi karmaşık desenleri doğrulamak için düzenli ifadeler kullanın. Veri formatlarındaki kültürel farklılıkları göz önünde bulundurun (örneğin, telefon numarası formatları ülkeler arasında önemli ölçüde değişir).
- Özel Doğrulama Fonksiyonları: Daha karmaşık doğrulama mantığı uygulamak için özel doğrulama fonksiyonları oluşturun. Örneğin, bir kullanıcı adının zaten alınıp alınmadığını veya bir şifrenin belirli kriterleri (örneğin, minimum uzunluk, özel karakterler) karşılayıp karşılamadığını kontrol etmeniz gerekebilir.
- Üçüncü Taraf Doğrulama Kütüphaneleri: Daha sağlam ve zengin özelliklere sahip doğrulama için Zod, Yup veya Joi gibi üçüncü taraf doğrulama kütüphanelerinden yararlanın. Bu kütüphaneler genellikle şema tabanlı doğrulama sağlayarak doğrulama kurallarını tanımlamayı ve uygulamayı kolaylaştırır.
Örnek: Doğrulama için Zod Kullanımı
Zod, popüler bir TypeScript öncelikli şema bildirme ve doğrulama kütüphanesidir. Zod'u kayıt formu örneğimize entegre edelim.
// server-actions.js
"use server";
import { z } from 'zod';
const registrationSchema = z.object({
name: z.string().min(2, { message: "İsim en az 2 karakter olmalıdır." }),
email: z.string().email({ message: "Geçersiz e-posta adresi" }),
password: z.string().min(8, { message: "Şifre en az 8 karakter olmalıdır." }),
});
export async function registerUser(prevState, formData) {
const data = Object.fromEntries(formData);
try {
const validatedData = registrationSchema.parse(data);
// Kullanıcı kaydını simüle et
await new Promise(resolve => setTimeout(resolve, 1000)); // API çağrısını simüle et
return { message: 'Kayıt başarılı!' };
} catch (error) {
if (error instanceof z.ZodError) {
return { message: error.errors[0].message };
} else {
return { message: 'Beklenmedik bir hata oluştu.' };
}
}
}
Açıklama:
zodkütüphanesindenznesnesini içe aktarıyoruz.- Her alan için doğrulama kurallarını belirtmek üzere Zod kullanarak bir
registrationSchematanımlıyoruz. Bu, minimum uzunluk gereksinimlerini ve e-posta formatı doğrulamasını içerir. registerUsersunucu eylemi içinde, form verilerini doğrulamak içinregistrationSchema.parse(data)kullanıyoruz.- Doğrulama başarısız olursa, Zod bir
ZodErrorfırlatır. Bu hatayı yakalayıp istemciye uygun bir hata mesajı döndürüyoruz.
Erişilebilirlik Hususları
Form doğrulaması uygularken erişilebilirliği göz önünde bulundurmak çok önemlidir. Formlarınızın engelli kişiler tarafından kullanılabilir olduğundan emin olun. İşte bazı önemli erişilebilirlik hususları:
- Açık ve Tanımlayıcı Hata Mesajları: Neyin yanlış gittiğini ve nasıl düzeltileceğini açıklayan açık ve tanımlayıcı hata mesajları sağlayın. Hata mesajlarını ilgili form alanlarıyla ilişkilendirmek için ARIA niteliklerini kullanın.
- Klavye Navigasyonu: Tüm form elemanlarının klavyeyle erişilebilir olduğundan emin olun. Kullanıcılar Tab tuşunu kullanarak formda gezinebilmelidir.
- Ekran Okuyucu Uyumluluğu: Formlarınızı ekran okuyucularla uyumlu hale getirmek için anlamsal HTML ve ARIA niteliklerini kullanın. Ekran okuyucular hata mesajlarını anons edebilmeli ve kullanıcılara rehberlik edebilmelidir.
- Yeterli Kontrast: Form elemanlarınızdaki metin ve arka plan renkleri arasında yeterli kontrast olduğundan emin olun. Bu, özellikle hata mesajları için önemlidir.
- Form Etiketleri: Etiketi girdiye doğru şekilde bağlamak için `for` niteliğini kullanarak her giriş alanıyla etiketleri ilişkilendirin.
Örnek: Erişilebilirlik için ARIA nitelikleri ekleme
// RegistrationForm.jsx
'use client';
import React from 'react';
import { experimental_useFormState as useFormState } from 'react-dom';
import { registerUser } from './server-actions';
function RegistrationForm() {
const [state, formAction] = useFormState(registerUser, { message: null });
return (
);
}
export default RegistrationForm;
Açıklama:
aria-invalid={!!state?.message}: Bir hata mesajı varsaaria-invalidniteliğinitrueolarak ayarlar ve girdinin geçersiz olduğunu belirtir.aria-describedby="name-error": Girdiyiaria-describedbyniteliğini kullanarak hata mesajıyla ilişkilendirir.aria-live="polite": Ekran okuyuculara hata mesajı göründüğünde bunu anons etmelerini bildirir.
Uluslararasılaştırma (i18n) Hususları
Küresel bir kitleyi hedefleyen uygulamalar için uluslararasılaştırma (i18n) esastır. Form doğrulaması uygularken aşağıdaki i18n yönlerini göz önünde bulundurun:
- Yerelleştirilmiş Hata Mesajları: Hata mesajlarını kullanıcının tercih ettiği dilde sağlayın. Çevirileri yönetmek için i18n kütüphaneleri veya framework'leri kullanın.
- Tarih ve Sayı Formatları: Tarih ve sayı girdilerini kullanıcının yerel ayarına göre doğrulayın. Tarih formatları ve sayı ayırıcıları ülkeler arasında önemli ölçüde değişir.
- Adres Doğrulama: Adresleri, kullanıcının ülkesinin özel adres formatı kurallarına göre doğrulayın. Adres formatları dünya çapında büyük farklılıklar gösterir.
- Sağdan Sola (RTL) Desteği: Formlarınızın Arapça ve İbranice gibi RTL dillerinde doğru görüntülendiğinden emin olun.
Örnek: Hata Mesajlarını Yerelleştirme
Yerelleştirilmiş hata mesajları içeren bir çeviri dosyanız (örneğin, en.json, tr.json) olduğunu varsayalım.
// en.json (İngilizce)
{
"nameRequired": "Name is required",
"invalidEmail": "Invalid email address",
"passwordTooShort": "Password must be at least 8 characters"
}
// tr.json (Türkçe)
{
"nameRequired": "İsim gereklidir",
"invalidEmail": "Geçersiz e-posta adresi",
"passwordTooShort": "Şifre en az 8 karakter olmalıdır"
}
// server-actions.js
"use server";
import { z } from 'zod';
// Kullanıcının yerel ayarını almak için bir fonksiyonunuz olduğunu varsayalım
import { getLocale } from './i18n';
import translations from './translations';
const registrationSchema = z.object({
name: z.string().min(2, { message: "nameRequired" }),
email: z.string().email({ message: "invalidEmail" }),
password: z.string().min(8, { message: "passwordTooShort" }),
});
export async function registerUser(prevState, formData) {
const data = Object.fromEntries(formData);
const locale = getLocale(); // Kullanıcının yerel ayarını al
const t = translations[locale] || translations['en']; // İngilizce'ye geri dön
try {
const validatedData = registrationSchema.parse(data);
// Kullanıcı kaydını simüle et
await new Promise(resolve => setTimeout(resolve, 1000)); // API çağrısını simüle et
return { message: t['registrationSuccessful'] || 'Kayıt Başarılı!' };
} catch (error) {
if (error instanceof z.ZodError) {
return { message: t[error.errors[0].message] || 'Doğrulama Hatası' };
} else {
return { message: t['unexpectedError'] || 'Beklenmedik bir hata oluştu.' };
}
}
}
Sunucu Taraflı Doğrulamanın Faydaları
İstemci taraflı doğrulama, kullanıcıya anında geri bildirim sağlamak için önemli olsa da, sunucu taraflı doğrulama güvenlik ve veri bütünlüğü için çok önemlidir. İşte sunucu taraflı doğrulamanın bazı temel faydaları:
- Güvenlik: Kötü niyetli kullanıcıların istemci taraflı doğrulamayı atlayıp geçersiz veya zararlı veriler göndermesini önler.
- Veri Bütünlüğü: Veritabanınızda saklanan verilerin geçerli ve tutarlı olmasını sağlar.
- İş Mantığının Uygulanması: İstemci tarafında kolayca uygulanamayan karmaşık iş kurallarını uygulamanıza olanak tanır.
- Uyumluluk: Veri gizliliği düzenlemelerine ve güvenlik standartlarına uymanıza yardımcı olur.
Performans Hususları
experimental_useFormState'i uygularken, sunucu eylemlerinin performans etkilerini göz önünde bulundurun. Aşırı veya verimsiz sunucu eylemleri, uygulamanızın performansını etkileyebilir. İşte bazı performans optimizasyon ipuçları:
- Sunucu Eylemi Çağrılarını En Aza İndirin: Sunucu eylemlerini gereksiz yere çağırmaktan kaçının. Doğrulama isteklerinin sıklığını azaltmak için giriş olaylarını geciktirin (debounce) veya seyreltin (throttle).
- Sunucu Eylemi Mantığını Optimize Edin: Yürütme süresini en aza indirmek için sunucu eylemlerinizdeki kodu optimize edin. Verimli algoritmalar ve veri yapıları kullanın.
- Önbelleğe Alma (Caching): Veritabanınızdaki yükü azaltmak için sık erişilen verileri önbelleğe alın.
- Kod Bölme (Code Splitting): Uygulamanızın ilk yükleme süresini azaltmak için kod bölmeyi uygulayın.
- CDN Kullanımı: Yükleme hızını artırmak için statik varlıkları bir içerik dağıtım ağından (CDN) sunun.
Gerçek Dünya Örnekleri
experimental_useFormState'in özellikle faydalı olabileceği bazı gerçek dünya senaryolarını keşfedelim:
- E-ticaret Ödeme Formları: Bir e-ticaret ödeme akışında gönderim adreslerini, ödeme bilgilerini ve fatura detaylarını doğrulayın.
- Kullanıcı Profili Yönetimi: İsimler, e-posta adresleri ve telefon numaraları gibi kullanıcı profili bilgilerini doğrulayın.
- İçerik Yönetim Sistemleri (CMS): Makaleler, blog gönderileri ve ürün açıklamaları gibi içerik girişlerini doğrulayın.
- Finansal Uygulamalar: İşlem tutarları, hesap numaraları ve yönlendirme numaraları gibi finansal verileri doğrulayın.
- Sağlık Uygulamaları: Tıbbi geçmiş, alerjiler ve ilaçlar gibi hasta verilerini doğrulayın.
En İyi Uygulamalar
experimental_useFormState'den en iyi şekilde yararlanmak için şu en iyi uygulamaları takip edin:
- Sunucu Eylemlerini Küçük ve Odaklı Tutun: Sunucu eylemlerini belirli görevleri yerine getirecek şekilde tasarlayın. Aşırı karmaşık sunucu eylemleri oluşturmaktan kaçının.
- Anlamlı Durum Güncellemeleri Kullanın: Form durumunu hata mesajları veya başarı göstergeleri gibi anlamlı bilgilerle güncelleyin.
- Net Kullanıcı Geri Bildirimi Sağlayın: Form durumuna göre kullanıcıya açık ve bilgilendirici geri bildirim görüntüleyin.
- Kapsamlı Test Edin: Formlarınızın doğru çalıştığından ve tüm olası senaryoları ele aldığından emin olmak için kapsamlı bir şekilde test edin. Bu, birim testleri, entegrasyon testleri ve uçtan uca testleri içerir.
- Güncel Kalın: React ve
experimental_useFormStateiçin en son güncellemeleri ve en iyi uygulamaları takip edin.
Sonuç
React'in experimental_useFormState hook'u, özellikle sunucu eylemleriyle birleştirildiğinde form durumunu ve doğrulamayı yönetmek için güçlü ve verimli bir yol sağlar. Bu hook'tan yararlanarak, form yönetimi mantığınızı modernleştirebilir, kullanıcı deneyimini iyileştirebilir ve veri bütünlüğünü sağlayabilirsiniz. Form doğrulaması uygularken erişilebilirlik, uluslararasılaştırma ve performansı göz önünde bulundurmayı unutmayın. Bu kılavuzda belirtilen en iyi uygulamaları takip ederek, web uygulamalarınızı geliştiren sağlam ve kullanıcı dostu formlar oluşturabilirsiniz.
experimental_useFormState gelişmeye devam ettikçe, en son güncellemeler ve en iyi uygulamalar hakkında bilgi sahibi olmak çok önemlidir. Bu yenilikçi özelliği benimseyin ve form doğrulama stratejilerinizi yeni zirvelere taşıyın.