M

MLOG

Türkçe

React'in useFormStatus hook'u için geliştiricilere küresel kullanıcılar için ilgi çekici form gönderim deneyimleri yaratma gücü veren kapsamlı bir rehber.

React useFormStatus: Form Gönderim Durumunda Uzmanlaşma

Formlar, kullanıcıların sunucularla etkileşim kurmasının ve veri sağlamasının birincil yolu olarak hizmet ederek sayısız web uygulamasının bel kemiğini oluşturur. Sorunsuz ve bilgilendirici bir form gönderme süreci sağlamak, olumlu kullanıcı deneyimleri yaratmak için çok önemlidir. React 18, form gönderim durumunun yönetimini basitleştirmek için tasarlanmış useFormStatus adında güçlü bir hook tanıttı. Bu kılavuz, useFormStatus'un özelliklerini, kullanım durumlarını ve küresel bir kitle için erişilebilir ve ilgi çekici formlar oluşturmaya yönelik en iyi uygulamaları keşfederek kapsamlı bir genel bakış sunmaktadır.

React useFormStatus Nedir?

useFormStatus, bir formun gönderim durumu hakkında bilgi sağlayan bir React Hook'udur. React bileşenlerinizden doğrudan sunucu tarafı mantığı çalıştırmanıza olanak tanıyan bir özellik olan sunucu eylemleri (server actions) ile sorunsuz bir şekilde çalışmak üzere tasarlanmıştır. Bu hook, formun bekleme durumu, verileri ve gönderim sırasında meydana gelen hatalar hakkında bilgi içeren bir nesne döndürür. Bu bilgiler, yükleme göstergeleri görüntüleme, form elemanlarını devre dışı bırakma ve hata mesajları gösterme gibi kullanıcılara gerçek zamanlı geri bildirim sağlamanıza olanak tanır.

Sunucu Eylemlerini (Server Actions) Anlamak

useFormStatus'a dalmadan önce, sunucu eylemlerini anlamak önemlidir. Sunucu eylemleri, sunucuda çalışan ve doğrudan React bileşenlerinden çağrılabilen asenkron fonksiyonlardır. Dosyanın en üstünde 'use server' yönergesi kullanılarak tanımlanırlar. Sunucu eylemleri genellikle aşağıdaki gibi görevler için kullanılır:

İşte basit bir sunucu eylemi örneği:

// actions.js
'use server';

export async function submitForm(formData) {
  // Sunucu isteğini taklit etmek için bir gecikme simülasyonu
  await new Promise(resolve => setTimeout(resolve, 2000));

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

  if (!name || !email) {
    return { message: 'Lütfen tüm alanları doldurun.' };
  }

  // Başarılı gönderim simülasyonu
  return { message: `${name} için form başarıyla gönderildi!` };
}

Bu eylem, form verilerini girdi olarak alır, bir gecikmeyi simüle eder ve ardından bir başarı veya hata mesajı döndürür. 'use server' yönergesi, React'e bu fonksiyonun sunucuda çalıştırılması gerektiğini söyler.

useFormStatus Nasıl Çalışır?

useFormStatus hook'u, bir form render eden bir bileşen içinde kullanılır. İçe aktarılan Sunucu Eylemi ile `action` prop'unu kullanan bir <form> elemanı içinde kullanılması gerekir. Hook, aşağıdaki özelliklere sahip bir nesne döndürür:

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

'use client'
import { useFormStatus } from 'react-dom';
import { submitForm } from './actions';

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

  return (
    <form action={submitForm}>
      <label htmlFor="name">Ad:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">E-posta:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Gönderiliyor...' : 'Gönder'}
      </button>
      {error && <p style={{ color: 'red' }}>Hata: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

Bu örnekte:

useFormStatus Kullanmanın Faydaları

useFormStatus, form gönderim durumunu yönetmek için çeşitli avantajlar sunar:

useFormStatus Kullanımı için En İyi Uygulamalar

useFormStatus'un faydalarını en üst düzeye çıkarmak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

useFormStatus için Kullanım Alanları

useFormStatus geniş bir senaryo yelpazesinde uygulanabilir:

Uluslararasılaştırmayı (i18n) Ele Alma

Küresel bir kitle için formlar oluştururken, uluslararasılaştırma (i18n) çok önemlidir. İşte useFormStatus kullanırken i18n'i nasıl ele alacağınız:

i18next ile Örnek:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en.json';
import tr from './locales/tr.json'; // Türkçe çeviriler için

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      tr: { translation: tr },
    },
    lng: 'tr', // Varsayılan dil olarak Türkçe
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // react zaten xss'ten korur
    },
  });

export default i18n;

// MyForm.js

import { useTranslation } from 'react-i18next';

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

  return (
    <form action={submitForm}>
      <label htmlFor="name">{t('name')}:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">{t('email')}:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? t('submitting') : t('submit')}
      </button>
      {error && <p style={{ color: 'red' }}>{t('error')}: {t(error.message)}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{t(data.message)}</p>}
    </form>
  );
}

export default MyForm;

Erişilebilirlik Hususları

Form oluştururken erişilebilirliği sağlamak esastır. İşte useFormStatus kullanırken formlarınızı daha erişilebilir hale getirmenin yolları:

ARIA Nitelikleri ile Örnek:

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

  return (
    <form action={submitForm}>
      <label htmlFor="name">Ad:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Bir hata olup olmadığını belirtir
        aria-describedby={error ? 'name-error' : null} // Hata mesajını ilişkilendirir
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">E-posta:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Gönderiliyor...' : 'Gönder'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

Temel Kullanımın Ötesi: Gelişmiş Teknikler

useFormStatus'un temel kullanımı basit olsa da, form gönderme deneyiminizi daha da geliştirebilecek birkaç gelişmiş teknik vardır:

Yaygın Sorunları Giderme

useFormStatus kullanırken bazı yaygın sorunlarla karşılaşabilirsiniz. İşte bunları nasıl gidereceğiniz:

useFormStatus Alternatifleri

useFormStatus güçlü bir araç olsa da, özellikle eski React sürümlerinde veya karmaşık form mantığıyla uğraşırken form gönderim durumunu yönetmek için alternatif yaklaşımlar vardır:

Yaklaşım seçimi, formunuzun karmaşıklığına ve özel gereksinimlerinize bağlıdır. Basit formlar için, useFormStatus genellikle en basit ve en verimli çözümdür. Daha karmaşık formlar için bir form kütüphanesi veya küresel durum yönetimi çözümü daha uygun olabilir.

Sonuç

useFormStatus, React ekosistemine değerli bir katkıdır, form gönderim durumunun yönetimini basitleştirir ve geliştiricilerin daha ilgi çekici ve bilgilendirici kullanıcı deneyimleri oluşturmasını sağlar. Özelliklerini, en iyi uygulamalarını ve kullanım durumlarını anlayarak, küresel bir kitle için erişilebilir, uluslararasılaştırılmış ve performanslı formlar oluşturmak için useFormStatus'tan yararlanabilirsiniz. useFormStatus'u benimsemek, geliştirmeyi kolaylaştırır, kullanıcı etkileşimini artırır ve sonuçta daha sağlam ve kullanıcı dostu web uygulamalarına katkıda bulunur.

Küresel bir kitle için formlar oluştururken erişilebilirlik, uluslararasılaştırma ve performansa öncelik vermeyi unutmayın. Bu kılavuzda belirtilen en iyi uygulamaları izleyerek, konumlarından veya yeteneklerinden bağımsız olarak herkes tarafından kullanılabilir formlar oluşturabilirsiniz. Bu yaklaşım, tüm kullanıcılar için daha kapsayıcı ve erişilebilir bir web'e katkıda bulunur.