React experimental_useFormStatus: Kapsamlı Bir Rehber

React'in gelişen ekosistemi, geliştirici deneyimini ve uygulama performansını iyileştirmek için sürekli olarak yeni araçlar ve API'ler sunmaktadır. Bu eklemelerden biri, şu anda deneysel aşamada olan experimental_useFormStatus hook'udur. Bu hook, özellikle sunucu eylemleri (server actions) ile uğraşırken bir form gönderiminin durumu hakkında değerli bilgiler sağlar. Bu rehber, experimental_useFormStatus'un işlevselliğini, faydalarını ve pratik uygulamalarını keşfederek ayrıntılarına inmektedir.

experimental_useFormStatus Nedir?

experimental_useFormStatus hook'u, React Sunucu Eylemleri kullanılarak başlatılan bir form gönderiminin durumu hakkında bilgi sağlamak için tasarlanmıştır. Bileşenlerin, form gönderim sürecinin bekleme, başarı veya başarısızlık gibi farklı aşamalarına tepki vermesini sağlar. Bu, geliştiricilerin daha duyarlı ve kullanıcı dostu form deneyimleri oluşturmasına olanak tanır.

Özünde, istemci tarafındaki form ile sunucu tarafındaki eylem arasındaki boşluğu doldurarak, form gönderim durumunu izlemek ve görüntülemek için açık ve öz bir yol sunar. Bu, kullanıcıya yükleme göstergeleri, başarı mesajları veya hata bildirimleri gibi görsel geri bildirimler sağlamak için özellikle kullanışlıdır.

experimental_useFormStatus Kullanmanın Temel Faydaları

• Geliştirilmiş Kullanıcı Deneyimi: Form gönderim durumu hakkında gerçek zamanlı geri bildirim sağlayarak kullanıcıları bilgilendirir ve etkileşimde tutar.
• Basitleştirilmiş Form Yönetimi: Form gönderimlerini yönetme sürecini kolaylaştırarak standart kod (boilerplate) miktarını azaltır.
• Geliştirilmiş Erişilebilirlik: Yardımcı teknolojilere iletilebilecek durum güncellemeleri sağlayarak geliştiricilerin daha erişilebilir formlar oluşturmasını sağlar.
• Daha İyi Hata Yönetimi: Hata tespiti ve raporlamayı basitleştirerek daha sağlam form doğrulaması ve hata kurtarmaya olanak tanır.
• Temiz Kod: Form gönderim durumunu yönetmek için bildirimsel ve öz bir yol sunarak kodun okunmasını ve bakımını kolaylaştırır.

experimental_useFormStatus'un Anatomisini Anlamak

experimental_useFormStatus hook'u, birkaç temel özellik içeren bir nesne döndürür. Bu özellikler, form gönderiminin mevcut durumu hakkında değerli bilgiler sağlar. Her bir özelliği ayrıntılı olarak inceleyelim:

• pending: Form gönderiminin o anda devam edip etmediğini gösteren bir boolean değerdir. Bu, bir yükleme göstergesi görüntülemek için kullanışlıdır.
• data: Başarılı form gönderimi üzerine sunucu eyleminden dönen verilerdir. Bu, kullanıcı arayüzünü eylemin sonuçlarıyla güncellemek için kullanılabilir.
• error: Form gönderimi sırasında meydana gelen hatalar hakkında bilgi içeren bir hata nesnesidir. Bu, kullanıcıya hata mesajları göstermek için kullanılabilir.
• action: Formu göndermek için kullanılan sunucu eylemi fonksiyonudur. Bu, eylemi gerekirse yeniden tetiklemek için faydalı olabilir.
• formState: Gönderimden önceki formun durumudur. Gönderim süreci başlamadan önce formun tuttuğu verilerin bir anlık görüntüsünü sağlar.

Temel Kullanım Örneği

İşte experimental_useFormStatus'un bir React bileşeninde nasıl kullanılacağına dair temel bir örnek:

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function myAction(formData) {
  'use server'
  // Sunucu tarafı mantığını burada gerçekleştirin
  await new Promise(resolve => setTimeout(resolve, 2000)); // Bir gecikmeyi simüle et

  const name = formData.get('name');

  if (!name) {
    return { message: 'İsim gereklidir.' };
  }

  return { message: `Merhaba, ${name}!` };
}

function MyForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      İsim:
      
      
        {pending ? 'Gönderiliyor...' : 'Gönder'}
      
      {error && 
Hata: {error.message}
}
      {data && 
{data.message}
}
    
  );
}

export default MyForm;

Bu örnekte, useFormStatus, myAction sunucu eylemi tarafından başlatılan form gönderiminin durumunu izlemek için kullanılır. pending özelliği, gönderim sırasında giriş alanını ve düğmeyi devre dışı bırakmak için kullanılırken, data ve error özellikleri sırasıyla başarı ve hata mesajlarını göstermek için kullanılır.

İleri Düzey Kullanım Alanları

Temel form gönderim takibinin ötesinde, experimental_useFormStatus daha gelişmiş senaryolarda da kullanılabilir. İşte birkaç örnek:

1. İyimser Güncellemeler (Optimistic Updates)

İyimser güncellemeler, kullanıcının formu gönderdikten hemen sonra, gönderimin başarılı olacağını varsayarak kullanıcı arayüzünü güncellemeyi içerir. Bu, uygulamanın algılanan performansını artırabilir. experimental_useFormStatus, form gönderimi başarısız olursa iyimser güncellemeyi geri almak için kullanılabilir.

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { useState } from 'react';

async function updateProfile(formData) {
  'use server'
  // Bir gecikmeyi simüle et
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');

  if (!name) {
    return { success: false, message: 'İsim gereklidir.' };
  }

  return { success: true, message: `${name} için profil güncellendi!` };
}

function ProfileForm({ initialName }) {
  const { pending, data, error } = useFormStatus();
  const [name, setName] = useState(initialName);

  const handleSubmit = async (e) => {
      e.preventDefault();

      // İyimser güncelleme
      setName(e.target.name.value);

      const formData = new FormData(e.target);
      const result = await updateProfile(formData);

      if (result && !result.success) {
          // Gönderim başarısız olursa iyimser güncellemeyi geri al
          setName(initialName); // Orijinal değere geri dön
      }
  };

  return (
    

      İsim:
       setName(e.target.value)} disabled={pending} />
      
        {pending ? 'Güncelleniyor...' : 'Profili Güncelle'}
      
      {error && 
Hata: {error.message}
}
      {data && data.success && 
{data.message}
}
    
  );
}

export default ProfileForm;

2. Koşullu İşleme (Conditional Rendering)

experimental_useFormStatus, form gönderim durumuna göre farklı kullanıcı arayüzü öğelerini koşullu olarak işlemek için kullanılabilir. Örneğin, sunucu eyleminin dönüşüne göre farklı bir mesaj veya arayüz görüntüleyebilirsiniz.

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function processOrder(formData) {
  'use server'
  // Bir gecikmeyi simüle et
  await new Promise(resolve => setTimeout(resolve, 2000));

  const orderId = Math.floor(Math.random() * 1000);

  return { orderId };
}

function OrderForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      
        {pending ? 'Sipariş İşleniyor...' : 'Siparişi Ver'}
      
      {error && 
Hata: {error.message}
}
      {data && data.orderId && (
        

          
Sipariş başarıyla verildi!
          
Sipariş numaranız: {data.orderId}
        
      )}
      {!pending && !data && !error && 
Siparişinizi vermeye hazır.
}
    
  );
}

export default OrderForm;

3. Erişilebilirlik Hususları

Erişilebilirlik, web geliştirmede çok önemlidir. experimental_useFormStatus ile form erişilebilirliğini büyük ölçüde artırabilirsiniz. Örneğin, ekran okuyucularını form gönderim durumu hakkında bilgilendirmek için ARIA niteliklerini kullanabilirsiniz.

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function submitComment(formData) {
  'use server'
  await new Promise(resolve => setTimeout(resolve, 2000));

  const commentText = formData.get('comment');

  if (!commentText) {
    return { message: 'Yorum gereklidir.' };
  }

  return { message: 'Yorum başarıyla gönderildi!' };
}

function CommentForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      Yorum:
      
      
        {pending ? 'Gönderiliyor...' : 'Yorumu Gönder'}
      
      {error && 
Hata: {error.message}
}
      {data && 
{data.message}
}
    
  );
}

export default CommentForm;

Bu kod parçasında, aria-busy={pending} form gönderilirken yardımcı teknolojileri bilgilendirir ve role="alert" ile role="status" sırasıyla hata ve başarı mesajlarını uygun şekilde etiketler.

Global Hususlar ve En İyi Uygulamalar

experimental_useFormStatus kullanarak küresel bir kitle için formlar geliştirirken, sorunsuz bir kullanıcı deneyimi sağlamak için birkaç husus dikkate alınmalıdır:

• Yerelleştirme: Tüm hata ve başarı mesajlarının farklı diller için doğru bir şekilde yerelleştirildiğinden emin olun. Bu, mesajların kendilerinin çevrilmesinin yanı sıra, mesaj formatının her dilin geleneklerine uyacak şekilde uyarlanmasını da içerir. Çevirileri yönetmek için i18next gibi kütüphaneleri veya React'in yerleşik Context API'sini kullanmayı düşünün.
• Tarih ve Saat Formatları: Dünya genelinde kullanılan farklı tarih ve saat formatlarına dikkat edin. Tarihleri ve saatleri her yerel ayara uygun şekilde biçimlendirmek için date-fns veya moment.js gibi bir kütüphane kullanın. Örneğin, ABD MM/DD/YYYY kullanırken, birçok Avrupa ülkesi DD/MM/YYYY kullanır.
• Sayı Formatları: Benzer şekilde, sayı formatları farklı bölgelerde değişiklik gösterir. Sayıları kullanıcının yerel ayarına göre biçimlendirmek için Intl.NumberFormat API'sini kullanın. Bu, ondalık ayırıcıları, binlik ayırıcıları ve para birimi simgelerini işlemeyi içerir.
• Para Birimi Yönetimi: Formunuz finansal işlemler içeriyorsa, para birimlerini doğru bir şekilde yönettiğinizden emin olun. Doğru para birimi hesaplamaları ve dönüşümleri yapmak için currency.js gibi bir kütüphane kullanın.
• Farklı Kullanıcılar için Erişilebilirlik: Formunuzun engelli kişiler tarafından kullanılabilir olmasını sağlamak için erişilebilirlik yönergelerini takip ettiğinizden emin olun. Bu, uygun ARIA nitelikleri sağlamayı, semantik HTML kullanmayı ve formun klavye ile erişilebilir olmasını sağlamayı içerir. Görme engellileri, işitme engellileri, bilişsel farklılıkları olanları ve motor beceri sınırlamaları olan kullanıcıları göz önünde bulundurun.
• Ağ Gecikmesi: Özellikle yavaş internet bağlantısı olan bölgelerdeki kullanıcılar için potansiyel ağ gecikmesi sorunlarının farkında olun. Form gönderim süreci sırasında kullanıcıya bir yükleme göstergesi veya ilerleme çubuğu gibi net geri bildirimler sağlayın.
• Hata Mesajı Açıklığı: Hata mesajlarının, kullanıcının konumu veya teknik yeterliliği ne olursa olsun açık, öz ve eyleme geçirilebilir olduğundan emin olun. Teknik jargondan kaçının.
• Doğrulama Kuralları: Posta kodu formatları, telefon numarası formatları ve adres gereksinimleri gibi doğrulama kurallarını, farklı bölgelerdeki beklenen geleneklere uyacak şekilde yerelleştirin.

Üçüncü Taraf Kütüphanelerle Entegrasyon

experimental_useFormStatus, form yönetimi yeteneklerini geliştirmek için çeşitli üçüncü taraf form kütüphaneleriyle sorunsuz bir şekilde entegre edilebilir. İşte birkaç örnek:

• Formik: Formik, form durum yönetimini ve doğrulamasını basitleştiren popüler bir form kütüphanesidir. Formik'i experimental_useFormStatus ile birleştirerek, formlarınızın gönderim durumunu kolayca izleyebilir ve kullanıcıya gerçek zamanlı geri bildirim sağlayabilirsiniz.
• React Hook Form: React Hook Form, mükemmel performans ve esneklik sunan, yaygın olarak kullanılan başka bir form kütüphanesidir. React Hook Form'u experimental_useFormStatus ile entegre etmek, form gönderimlerini yönetmenize ve durum güncellemelerini temiz ve verimli bir şekilde görüntülemenize olanak tanır.
• Yup: Yup, değer ayrıştırma ve doğrulama için bir şema oluşturucudur. Yup, formlarınız için doğrulama şemaları tanımlamak için kullanılabilir ve experimental_useFormStatus, doğrulama hatalarını kullanıcıya gerçek zamanlı olarak göstermek için kullanılabilir.

Bu kütüphanelerle entegre olmak için, `action` prop'unu kütüphanenin form bileşenine veya işleyici fonksiyonuna geçirebilir ve ardından gönderim durumunu göstermesi gereken ilgili bileşenler içinde `experimental_useFormStatus` kullanabilirsiniz.

Alternatif Yaklaşımlarla Karşılaştırma

experimental_useFormStatus'dan önce, geliştiriciler form gönderim durumunu izlemek için genellikle manuel durum yönetimine veya özel hook'lara güvenirlerdi. Bu yaklaşımlar zahmetli ve hataya açık olabilir. experimental_useFormStatus, form gönderimlerini yönetmek için daha bildirimsel ve öz bir yol sunarak standart kodu azaltır ve kod okunabilirliğini artırır.

Diğer alternatifler, sunucu tarafı veri mutasyonlarını yönetmek için `react-query` veya `swr` gibi kütüphaneleri kullanmayı içerebilir; bu kütüphaneler form gönderimlerini dolaylı olarak yönetebilir. Ancak, experimental_useFormStatus, özellikle React Sunucu Eylemleri kullanılırken form durumunu izlemek için daha doğrudan ve React merkezli bir yol sağlar.

Sınırlamalar ve Dikkat Edilmesi Gerekenler

experimental_useFormStatus önemli avantajlar sunsa da, sınırlamalarının ve dikkat edilmesi gerekenlerin farkında olmak önemlidir:

• Deneysel Durum: Adından da anlaşılacağı gibi, experimental_useFormStatus hala deneysel aşamadadır. Bu, API'sinin gelecekte değişebileceği anlamına gelir.
• Sunucu Eylemleri Bağımlılığı: Hook, React Sunucu Eylemleri ile sıkı bir şekilde bağlantılıdır. Geleneksel istemci tarafı form gönderimleriyle kullanılamaz.
• Tarayıcı Uyumluluğu: Hedef tarayıcılarınızın React Sunucu Eylemleri ve experimental_useFormStatus için gerekli özellikleri desteklediğinden emin olun.

Sonuç

experimental_useFormStatus hook'u, sağlam ve kullanıcı dostu formlar oluşturmak için React'in araç setine değerli bir ektir. Form gönderim durumunu izlemek için bildirimsel ve öz bir yol sunarak, form yönetimini basitleştirir, kullanıcı deneyimini iyileştirir ve erişilebilirliği artırır. Henüz deneysel aşamada olsa da, experimental_useFormStatus React'te form geliştirmenin geleceği için büyük umut vaat ediyor. React ekosistemi gelişmeye devam ettikçe, bu tür araçları benimsemek modern ve performanslı web uygulamaları oluşturmak için çok önemli olacaktır.

experimental_useFormStatus ve diğer deneysel özellikler hakkında en güncel bilgiler için her zaman resmi React belgelerine başvurmayı unutmayın. Mutlu kodlamalar!