React'in deneysel experimental_useFormStatus kancasına derinlemesine bir bakış. Güçlü form hata yönetimi, gönderim takibi ve gelişmiş kullanıcı deneyimi için kullanın. Dayanıklı ve kullanıcı dostu formlar oluşturmayı öğrenin.
React experimental_useFormStatus: Form Gönderim Durumlarını Yönetmede Uzmanlaşın
React'in sürekli gelişen dünyası, geliştirmeyi basitleştirmeyi ve kullanıcı deneyimini iyileştirmeyi amaçlayan özellikleri sürekli olarak sunmaktadır. Bu tür yeni eklemelerden biri, şu anda deneysel aşamada olan experimental_useFormStatus kancasıdır. Bu güçlü araç, hata durumları da dahil olmak üzere form gönderimlerinin durumunu doğrudan React bileşenleriniz içinde izlemenin modern bir yolunu sunar. Bu blog yazısı, sağlam ve kullanıcı dostu formlar oluşturmak için experimental_useFormStatus'ı anlama ve etkili bir şekilde kullanma konusunda kapsamlı bir rehber sunmaktadır.
experimental_useFormStatus'a Duyulan İhtiyacı Anlamak
Geleneksel olarak, React'te form gönderimlerini yönetmek önemli miktarda standart kod gerektiriyordu. Geliştiricilerin gönderim durumlarını (beklemede, başarılı, hata) manuel olarak izlemesi, hata mesajlarını işlemesi ve kullanıcı arayüzünü buna göre güncellemesi gerekiyordu. Bu, özellikle birden fazla doğrulama kuralı ve eşzamansız işlem içeren karmaşık formlarda, karmaşık ve hataya açık kodlara yol açabiliyordu.
experimental_useFormStatus, form gönderim durumunu yönetmek için merkezi ve bildirimsel bir yol sunarak bu zorluğun üstesinden gelir. Hataları izleme, yükleme durumlarını belirtme ve kullanıcıya geri bildirim sağlama sürecini basitleştirir, bu da daha temiz, daha sürdürülebilir ve daha performanslı kodlarla sonuçlanır.
experimental_useFormStatus Nedir?
experimental_useFormStatus kancası, bir form gönderiminin durumu hakkında bilgi sağlamak için özel olarak tasarlanmış bir React kancasıdır. <form> elemanının action özelliği ve sunucu eylemleri (diğer bir nispeten yeni React özelliği) ile birlikte çalışır. Bir sunucu eylemini işaret eden bir action'a sahip bir form gönderildiğinde, experimental_useFormStatus bu gönderimin mevcut durumu hakkında veri sağlar.
Özellikle, kanca aşağıdaki özellikleri içeren bir nesne döndürür:
pending: Form gönderiminin şu anda devam edip etmediğini belirten bir boole değeri.data: Form tarafından gönderilen veriler.method: Form gönderimi için kullanılan HTTP metodu (örneğin, "POST", "GET").action: Form gönderimi tarafından tetiklenen sunucu eylemi.error: Form gönderimi başarısız olursa bir hata nesnesi. Bu nesne, sunucuda meydana gelen hata hakkında bilgi içerecektir.
experimental_useFormStatus Nasıl Kullanılır?
experimental_useFormStatus'ın nasıl kullanılacağını göstermek için pratik bir örnek üzerinden gidelim. Ad, e-posta ve mesaj alanları içeren basit bir iletişim formu oluşturacağız ve kancayı yükleme göstergelerini ve hata mesajlarını görüntülemek için nasıl kullanacağımızı göstereceğiz.
Ön Koşullar
Başlamadan önce, bir React projesi kurduğunuzdan ve deneysel özellikleri destekleyen bir React sürümü kullandığınızdan emin olun. react.config.js dosyanızda (veya derleme aracınız için eşdeğer yapılandırmada) deneysel özellikleri etkinleştirmeniz gerekebilir. Ayrıca, form gönderimini işlemek ve uygun yanıtları döndürmek için yapılandırılmış bir arka uç (örneğin, Express ile Node.js) olduğundan emin olun.
Örnek: İletişim Formu
İşte React bileşen kodu:
import React, { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';
async function handleSubmit(formData) {
'use server';
try {
const response = await fetch('/api/contact', {
method: 'POST',
body: formData,
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Form gönderimi başarısız oldu');
}
// Başarılı gönderimi yönet (ör. yönlendirme, başarı mesajı gösterme)
console.log('Form başarıyla gönderildi!');
// Gerçek bir uygulamada burada yönlendirme yapabilir veya durumu güncelleyebilirsiniz
return { success: true, message: 'Form başarıyla gönderildi!' };
} catch (error) {
console.error('Form gönderilirken hata oluştu:', error);
return { success: false, message: error.message };
}
}
function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: '',
});
const { pending, data, error } = useFormStatus();
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
return (
);
}
export default ContactForm;
Açıklama
useFormStatus'ı İçe Aktarma:experimental_useFormStatuskancasınıreact-dom'dan içe aktarıyoruz. Unutmayın ki bu deneysel bir özelliktir, bu nedenle içe aktarma yolu gelecekteki React sürümlerinde değişebilir.- Form Durumu:
useStatekullanan birformDatadurum değişkeni, kullanıcı tarafından girilen adı, e-postayı ve mesajı takip eder. useFormStatusKancası: Bileşen içindeuseFormStatus()'ı çağırıyoruz. Bu kanca, form bir sunucu eylemi aracılığıyla gönderildiğinde formun gönderim durumu hakkında otomatik olarak bilgi sağlar.- Durum Özelliklerine Erişme:
useFormStatus()tarafından döndürülen nesnedenpending,dataveerror'ı çıkarıyoruz. - Yükleme Göstergesi: Gönder düğmesinde koşullu olarak bir "Gönderiliyor..." mesajı oluşturmak ve birden fazla gönderimi önlemek için düğmeyi devre dışı bırakmak amacıyla
pendingboole değerini kullanıyoruz. - Hata Yönetimi: Form gönderimi sırasında bir hata oluşursa (
errorözelliği ile belirtildiği gibi), kullanıcıya bir hata mesajı gösteriyoruz. - Başarı Mesajı: Gönderim başarılı olursa (sunucu eyleminin { success: true, message: '...' } döndürmesiyle belirlenir), bir başarı mesajı gösteriyoruz.
- Sunucu Eylemi:
handleSubmitişlevi'use server'ile işaretlenerek bir sunucu eylemi haline getirilir. Form verilerini bir API uç noktasına (/api/contact) göndermek içinfetchkullanır. - Sunucu Eyleminde Hata Yönetimi: Sunucu eylemi, API çağrısını ve olası hataları yönetmeye çalışır. API yanıtında bir hata veya istisna varsa,
{ success: false, message: '...' }döndürür. Bu mesaj daha sonrauseFormStatuskancasınınerrorözelliğinde kullanılabilir hale gelir. - Action Özelliği:
<form>etiketininactionözelliğihandleSubmitsunucu eylemine ayarlanır. Bu, React'e form gönderildiğinde bu işlevi kullanmasını söyler.
Arka Uç (Node.js ve Express Kullanarak Basitleştirilmiş Örnek)
İşte form gönderimini işlemek için Express kullanan çok temel bir Node.js sunucusu örneği:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3001;
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.post('/api/contact', (req, res) => {
const { name, email, message } = req.body;
// Sunucu taraflı doğrulamayı veya işlemeyi simüle et (ör. e-posta gönderme)
if (!name || !email || !message) {
return res.status(400).json({ message: 'Tüm alanlar zorunludur.' });
}
if (!email.includes('@')) {
return res.status(400).json({message: 'Geçersiz e-posta formatı.'});
}
// Gecikmeyle başarılı bir işlemi simüle et
setTimeout(() => {
console.log('Form verileri alındı:', { name, email, message });
res.status(200).json({ message: 'Form başarıyla gönderildi!' });
}, 1000);
});
app.listen(port, () => {
console.log(`Sunucu http://localhost:${port} adresinde dinleniyor`);
});
Arka Uç İçin Önemli Hususlar:
- Doğrulama: Veri bütünlüğünü ve güvenliğini sağlamak için her zaman sunucu taraflı doğrulama yapın.
- Hata Yönetimi: Beklenmedik sorunları yakalamak ve istemciye anlamlı hata mesajları döndürmek için sağlam hata yönetimi uygulayın.
- Güvenlik: Siteler arası komut dosyası çalıştırma (XSS) ve SQL enjeksiyonu gibi güvenlik açıklarını önlemek için tüm girdi verilerini temizleyin ve doğrulayın.
- CORS: React uygulamanızın alan adından gelen isteklere izin vermek için Cross-Origin Resource Sharing (CORS) yapılandırmasını uygun şekilde yapın.
- JSON Yanıtları: İstemciye uygun HTTP durum kodlarıyla (örneğin, başarı için 200, istemci hataları için 400, sunucu hataları için 500) JSON yanıtları döndürün.
experimental_useFormStatus Kullanmanın Faydaları
- Basitleştirilmiş Form Yönetimi: Form gönderim durumunun merkezi yönetimi, standart kod miktarını azaltır ve kod okunabilirliğini artırır.
- Geliştirilmiş Kullanıcı Deneyimi: Form gönderim durumu hakkında gerçek zamanlı geri bildirim (yükleme göstergeleri, hata mesajları) kullanıcı etkileşimini artırır ve hayal kırıklığını azaltır.
- Gelişmiş Hata Yönetimi: Ayrıntılı hata bilgilerine daha kolay erişim, daha hedefli hata yönetimi ve daha iyi hata ayıklama sağlar.
- Bildirimsel Yaklaşım: Kanca, form durumunu yönetmek için bildirimsel bir yol sunar, bu da kodu daha öngörülebilir ve anlaşılması daha kolay hale getirir.
- Sunucu Eylemleriyle Entegrasyon: React Sunucu Eylemleri ile sorunsuz entegrasyon, veri getirme ve değiştirme işlemlerini basitleştirir, bu da daha verimli ve performanslı uygulamalara yol açar.
İleri Düzey Kullanım Senaryoları
Temel örneğin ötesinde, experimental_useFormStatus daha karmaşık senaryolarda kullanılabilir:
1. Tek Bir Sayfada Birden Fazla Formu Yönetme
Tek bir sayfada birden fazla formunuz varsa, her formun kendi useFormStatus örneği olacaktır, bu da gönderim durumlarını bağımsız olarak izlemenize olanak tanır.
2. Özel Doğrulama Mantığı Uygulama
Doğrulama hatalarını gerçek zamanlı olarak görüntülemek için useFormStatus'ı özel doğrulama mantığıyla entegre edebilirsiniz. Örneğin, sunucuya göndermeden önce form verilerini istemci tarafında doğrulamak için Yup veya Zod gibi bir doğrulama kütüphanesi kullanabilirsiniz. Sunucu eylemi daha sonra useFormStatus kullanılarak görüntülenebilecek arka uç kurallarına dayalı doğrulama hataları döndürebilir.
3. İyimser Güncellemeler
Kullanıcı formu gönderdikten hemen sonra, gönderimin başarılı olacağını varsayarak kullanıcı arayüzünü güncellediğiniz iyimser güncellemeleri uygulamak için useFormStatus'ı kullanabilirsiniz. Gönderim başarısız olursa, kullanıcı arayüzünü önceki durumuna geri döndürebilir ve bir hata mesajı görüntüleyebilirsiniz.
4. Dosya Yüklemeleri için İlerleme Göstergeleri
useFormStatus, dosya yüklemeleri için doğrudan ilerleme güncellemeleri sağlamasa da, kullanıcıya ilerleme göstergeleri göstermek için diğer tekniklerle (örneğin, XMLHttpRequest nesnesini ve upload.onprogress olayını kullanarak) birleştirebilirsiniz.
Yaygın Hatalar ve Bunlardan Kaçınma Yolları
- Sunucu Eylemlerini Kullanmamak:
experimental_useFormStatusöncelikle React Sunucu Eylemleri ile çalışmak üzere tasarlanmıştır. Sunucu eylemleri kullanmıyorsanız, form gönderim durumunu manuel olarak yönetmeniz ve kullanıcı arayüzünü buna göre güncellemeniz gerekir, bu da kancayı kullanmanın amacını ortadan kaldırır. - Sunucuda Yanlış Hata Yönetimi: Sunucu tarafı kodunuzun hataları zarif bir şekilde ele aldığından ve istemciye anlamlı hata mesajları döndürdüğünden emin olun.
useFormStatuskancasınınerrorözelliği yalnızca sunucuda meydana gelen hatalar hakkında bilgi içerecektir. - Potansiyel Güvenlik Açıklarını Göz Ardı Etmek: Güvenlik açıklarını önlemek için hem istemci tarafında hem de sunucu tarafında kullanıcı girdisini her zaman temizleyin ve doğrulayın.
- Kullanıcıya Geri Bildirim Sağlamamak: Kullanıcıya form gönderim durumu hakkında (yükleme göstergeleri, hata mesajları, başarı mesajları) net ve zamanında geri bildirim sağlamak çok önemlidir. Bu, kullanıcı deneyimini geliştirir ve hayal kırıklığını azaltır.
experimental_useFormStatus Kullanımı İçin En İyi Uygulamalar
- Anlamlı Hata Mesajları Kullanın: Kullanıcının neyin yanlış gittiğini ve nasıl düzelteceğini anlamasına yardımcı olan açık ve özlü hata mesajları sağlayın.
- İstemci Tarafı Doğrulamasını Uygulayın: Gereksiz sunucu isteklerini azaltmak ve kullanıcı deneyimini iyileştirmek için sunucuya göndermeden önce form verilerini istemci tarafında doğrulayın.
- Hataları Zarif Bir Şekilde Ele Alın: Beklenmedik sorunları yakalamak ve uygulamanızın çökmesini önlemek için sağlam hata yönetimi uygulayın.
- Formlarınızı Kapsamlı Bir Şekilde Test Edin: Doğru çalıştıklarından ve hata yönetiminin beklendiği gibi işlediğinden emin olmak için formlarınızı farklı girdiler ve senaryolarla test edin.
- Kodunuzu Temiz ve Okunabilir Tutun: Kodunuzu daha kolay anlaşılır ve sürdürülebilir hale getirmek için açıklayıcı değişken adları ve yorumlar kullanın.
- Erişilebilirliğe Öncelik Verin: Formlarınızın engelliler de dahil olmak üzere tüm kullanıcılar için erişilebilir olduğundan emin olun. Anlamsal HTML kullanın, form alanları için uygun etiketler sağlayın ve hata mesajlarının açıkça görünür ve anlaşılır olduğundan emin olun.
Uluslararasılaştırma Hususları
Küresel bir kitle için formlar oluştururken, aşağıdaki uluslararasılaştırma yönlerini göz önünde bulundurun:
- Hata Mesajlarının Yerelleştirilmesi: Hata mesajlarının kullanıcının tercih ettiği dile çevrildiğinden emin olun. Çevirileri yönetmek için
i18nextgibi bir yerelleştirme kütüphanesi kullanabilirsiniz. - Tarih ve Sayı Biçimlendirme: Kullanıcının yerel ayarına göre uygun tarih ve sayı biçimlerini kullanın.
- Adres Biçimleri: Adres formu alanlarını farklı ülkelerin adres biçimlerine uyacak şekilde uyarlayın. Örneğin, bazı ülkeler posta kodlarını şehir adlarından önce kullanırken, diğerleri sonra kullanır.
- Telefon Numarası Doğrulaması: Farklı ülke kodlarını ve telefon numarası biçimlerini destekleyen telefon numarası doğrulaması uygulayın.
- Sağdan Sola (RTL) Düzenler: Arapça ve İbranice gibi diller için RTL düzenlerini destekleyin.
Örneğin, bir telefon numarası isteyen bir form, kullanıcının seçtiği ülkeye bağlı olarak doğrulama kurallarını dinamik olarak ayarlamalıdır. Bir ABD telefon numarası 10 haneli bir numara gerektirirken, bir İngiltere telefon numarası başındaki sıfır dahil 11 hane gerektirebilir. Benzer şekilde, "Geçersiz telefon numarası formatı" gibi hata mesajları kullanıcının diline çevrilmelidir.
Sonuç
experimental_useFormStatus, form gönderim durumunu yönetmek için modern ve bildirimsel bir yol sunan, React'in araç setine değerli bir ektir. Bu kancadan yararlanarak, geliştiriciler daha sağlam, kullanıcı dostu ve sürdürülebilir formlar oluşturabilirler. Bu özellik şu anda deneysel olduğundan, en son React belgeleri ve topluluk en iyi uygulamaları ile güncel kaldığınızdan emin olun. Form yönetimi yeteneklerinizi yükseltmek ve uygulamalarınız için olağanüstü kullanıcı deneyimleri yaratmak için bu güçlü aracı benimseyin.