React'te Formik ve Yup ile Karmaşık Form Validasyonu: Dinamik Alanlar ve Asenkron Doğrulama

React uygulamalarında kullanıcıdan dinamik olarak eklenen alanlar (örneğin, e-posta adresleri listesi) veya sunucu tarafında doğrulama gerektiren durumlar (örneğin, e-posta benzersizliği) form yönetimini zorlaştırır. Formik ve Yup bu tür karmaşık senaryolarda esnek ve güçlü bir çözüm sunar. Bu yazıda, Formik'in FieldArray bileşeni ile dinamik alanlar eklemeyi ve Yup'un test metoduyla asenkron doğrulama yapmayı adım adım inceleyeceğiz.

Dinamik Form Alanları Nasıl Eklenir? (FieldArray Kullanımı)

Kullanıcının birden fazla e-posta adresi girmesine izin veren bir form düşünün. Formik'in FieldArray bileşeni, form değerleri içinde bir dizi alanı yönetmek için idealdir. Aşağıdaki örnekte, her e-posta alanı için bir Yup doğrulama şeması eklenir ve FieldArray'in push, remove metodları ile alan ekleme/çıkarma işlemleri yapılır.

import { Formik, Field, FieldArray, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const emailSchema = Yup.object().shape({
  emails: Yup.array().of(
    Yup.string().email('Geçerli bir e-posta giriniz').required('Zorunlu')
  )
});

<Formik
  initialValues={{ emails: [''] }}
  validationSchema={emailSchema}
  onSubmit={values => console.log(values)}
  render={({ values }) => (
    <Form>
      <FieldArray name="emails">
        {({ push, remove }) => (
          <div>
            {values.emails.map((email, index) => (
              <div key={index}>
                <Field name={`emails.${index}`} />
                <ErrorMessage name={`emails.${index}`} component="div" />
                <button type="button" onClick={() => remove(index)}>Sil</button>
              </div>
            ))}
            <button type="button" onClick={() => push('')}>E-posta Ekle</button>
          </div>
        )}
      </FieldArray>
      <button type="submit">Gönder</button>
    </Form>
  )}
</Formik>

Bu yapıda her alan ayrı ayrı doğrulanır ve hata mesajları ErrorMessage bileşeni ile gösterilir. Daha karmaşık formlar için bu deseni React Custom Hook'ları ile birleştirerek tekrar kullanılabilir hale getirebilirsiniz.

Asenkron Doğrulama Nasıl Uygulanır? (Yup test Metodu)

Bazı doğrulamalar sunucuya danışmayı gerektirir: örneğin, e-posta adresinin veritabanında zaten kayıtlı olup olmadığını kontrol etmek. Yup'un test metodu, asenkron fonksiyonları destekler. Aşağıdaki örnekte, bir e-posta alanı için asenkron doğrulama şeması oluşturuluyor:

const asyncEmailSchema = Yup.string()
  .email('Geçerli bir e-posta giriniz')
  .test('unique-email', 'Bu e-posta zaten kullanılıyor', async (value) => {
    if (!value) return true;
    const response = await fetch(`/api/check-email?email=${value}`);
    const { exists } = await response.json();
    return !exists;
  });

Bu şemayı Formik'in validationSchema prop'una eklediğinizde, her alan değiştiğinde asenkron doğrulama otomatik olarak çalışır. Ancak dikkat edilmesi gereken bir nokta: asenkron doğrulama gecikmelere neden olabilir. Kullanıcı deneyimini iyileştirmek için debounce uygulayın veya yükleme durumunu isValidating prop'u ile takip edin.

Hata Durumları ve Kullanıcı Geri Bildirimi Nasıl Yönetilir?

Formik, errors ve touched objeleri sayesinde hangi alanların doğrulandığını ve hangilerinde hata olduğunu izler. Aşağıdaki tabloda yaygın durumlar ve önerilen yaklaşımlar listelenmiştir:

Özellikle asenkron doğrulamada, kullanıcının girdiği değerin hala geçerli olup olmadığını kontrol etmek için useRef ile son sorguyu iptal edebilirsiniz. Bu konuda useRef Hook'unun derinlemesine kullanımı yazımızda daha fazla bilgi bulabilirsiniz.

Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler

• Asenkron doğrulamayı her girişte çalıştırmak: Performans sorunlarına yol açar. Debounce (örn. 300ms) kullanarak sunucuya yapılan istek sayısını azaltın.
• Dinamik alanlarda key prop'unu yanlış kullanmak: FieldArray içinde her alanın key değeri benzersiz olmalıdır. Eğer index kullanıyorsanız, alan silindiğinde kayma yaşanabilir. Bunun yerine rastgele bir id kullanmak daha güvenlidir.
• Hata mesajlarını göstermeyi unutmak: Formik'in ErrorMessage bileşeni veya meta.error kullanılarak hatalar mutlaka kullanıcıya iletilmelidir.
• Asenkron doğrulama sonucunu önbelleğe almamak: Aynı değer için tekrar tekrar istek yapılıyorsa, sonucu bir önbellek mekanizması (örn. JavaScript Map) ile saklayarak gereksiz yükü azaltın.

Bu adımlarla, Formik ve Yup kullanarak karmaşık form senaryolarını profesyonelce yönetebilirsiniz. Düzenli projelerde bu desenleri tekrar kullanmak için React Custom Hook'ları yazmak, kod tekrarını azaltacak ve bakımı kolaylaştıracaktır.

Sık Sorulan Sorular

Formik FieldArray ile dinamik alan eklerken her alana ayrı ayrı doğrulama yapabilir miyim?

Evet, FieldArray içinde her alan için Yup şemasında 'of' metodu kullanarak ayrı ayrı doğrulama kuralları tanımlayabilirsiniz. Örneğin, e-posta listesinde her elemanın geçerli bir e-posta olması gibi.

Yup ile asenkron doğrulama yaparken performansı nasıl artırabilirim?

Debounce kullanarak her tuş vuruşunda sunucuya istek göndermeyi önleyin. Ayrıca, aynı değer için sonucu önbelleğe almak veya AbortController ile eski istekleri iptal etmek performansı artırır.

Formik'te asenkron doğrulama sırasında kullanıcıya yükleme göstergesi nasıl eklenir?

Formik'in 'isValidating' prop'u ile doğrulamanın devam ettiğini tespit edebilirsiniz. Bu prop true olduğunda bir spinner gösterebilir veya ilgili alana 'Kontrol ediliyor…' metni ekleyebilirsiniz.

Dinamik alanlar silindiğinde hataların karışmasını nasıl önlerim?

FieldArray'de her alan için benzersiz bir 'key' kullanın (örneğin, rastgele bir id). Diziden eleman silindiğinde index bazlı key'ler kaymaya neden olabilir, bu da yanlış hata gösterimine yol açar.