React Form Validasyonunda Formik ve Yup: Kapsamlı Rehber

React uygulamalarında form validasyonu genellikle karmaşık ve zaman alıcı bir süreçtir. Formik ve Yup, bu zorluğu ortadan kaldırarak hem geliştirme sürecini hızlandırır hem de kullanıcı deneyimini önemli ölçüde iyileştirir. Bu kapsamlı rehberde, modern web projelerinde dinamik ve güvenilir formlar oluşturmak için Formik ve Yup ikilisini nasıl etkili bir şekilde kullanacağınızı adım adım öğreneceksiniz. Güvenilir veri girişi ve akıcı bir kullanıcı arayüzü sağlamak için bu araçların gücünü keşfetmeye hazır olun.

Günümüzün dijital dünyasında, web uygulamaları kullanıcılarla etkileşim kurmanın temelini formlar aracılığıyla sağlar. Kayıt işlemlerinden ödeme sayfalarına, iletişim formlarından arama filtrelerine kadar neredeyse her etkileşim, bir formun doğru ve güvenilir bir şekilde çalışmasını gerektirir. Ancak, kullanıcıdan veri almak çoğu zaman basit bir iş değildir. Geliştiriciler olarak, kullanıcıların yanlış veya eksik bilgi girmesini engellemek, veri bütünlüğünü sağlamak ve aynı zamanda kullanıcıya akıcı, hatasız bir deneyim sunmakla yükümlüyüz. İşte bu noktada form yönetimi ve validasyon süreçleri hayati bir rol oynar.

Kötü tasarlanmış veya yetersiz doğrulamaya sahip formlar, hem kullanıcılar hem de işletmeler için ciddi sorunlara yol açabilir. Kullanıcılar, anlamsız hata mesajlarıyla veya karmaşık doldurma süreçleriyle karşılaştığında hayal kırıklığına uğrar, bu da uygulamanın terk edilme oranını artırabilir. Öte yandan, yanlış veya geçersiz verilerin sisteme girmesi, iş mantığında hatalara, güvenlik açıklarına ve veri tabanı kirliliğine neden olabilir. Bu nedenle, form validasyonu sadece bir estetik tercih değil, aynı zamanda uygulamanın sağlamlığı, güvenliği ve kullanılabilirliği için bir zorunluluktur. React gibi modern JavaScript kütüphaneleriyle çalışırken, durum yönetimi ve bileşen tabanlı yaklaşımlar sayesinde formları daha modüler bir şekilde ele almak mümkündür. Ancak, bu durum kendi içinde bazı zorlukları da beraberinde getirebilir. Özellikle form alanlarının durumu, değişikliklerin izlenmesi ve doğrulama mantığının merkezi bir şekilde yönetilmesi karmaşık hale gelebilir. Formik ve Yup gibi araçlar, bu zorlukları aşmak için tasarlanmıştır. Bu araçlar, geliştiricilerin formları daha az kodla, daha sürdürülebilir ve daha güvenilir bir şekilde oluşturmasına olanak tanıyarak React ekosisteminde form yönetimini yeniden tanımlar. Böylece, geliştiriciler kullanıcı deneyimine ve uygulamanın temel işlevlerine odaklanabilirken, form karmaşıklığıyla mücadele etmek zorunda kalmazlar.

Formik ve Yup Temelleri: Dinamik Formlar İçin İdeal İkili

React ekosisteminde form geliştirmenin getirdiği zorlukları aşmak için ortaya çıkan Formik ve Yup, form yönetimini ve validasyonunu önemli ölçüde basitleştiren iki güçlü kütüphanedir. Bu ikili, birlikte kullanıldığında geliştiricilere kapsamlı ve esnek bir form çözümü sunar.

Formik’in Çalışma Prensibi: State Yönetimi ve Kolaylık

Formik, React’te form oluşturmanın ve yönetmenin en popüler yollarından biridir. Temel amacı, form state’ini (alan değerleri, hatalar, dokunulmuş alanlar vb.) yönetmek, validasyon mantığını entegre etmek ve form gönderme işlemini kolaylaştırmaktır. Formik, genellikle “denetimli bileşenler” (controlled components) yaklaşımının getirdiği boilerplate kodu (tekrarlayan kod) azaltarak geliştiricilere zaman kazandırır. Formik’in sunduğu bazı temel özellikler şunlardır:

• State Yönetimi: Formik, form değerlerini, hatalarını, alanların dokunulup dokunulmadığını (touched state) merkezi olarak yönetir. Bu sayede, her form alanı için ayrı ayrı state tanımlamaktan kurtulursunuz.
• Validasyon Entegrasyonu: Formik, validasyon mantığını kolayca entegre etmenizi sağlar. Yup gibi şema tabanlı validasyon kütüphaneleriyle mükemmel uyum içindedir, ancak kendi özel validasyon fonksiyonlarınızı da kullanabilirsiniz.
• Gönderme İşlemi: Formik, form gönderme (submit) işlemini basitleştirir. Asenkron gönderme işlemleri sırasında formun yüklenme durumunu (isSubmitting) otomatik olarak yönetir.
• Hata Yönetimi: Her form alanı için validasyon hatalarını gösterme ve yönetme sürecini kolaylaştırır.

Formik, üç temel yöntemle kullanılabilir: render prop bileşeni, withFormik HOC (Higher-Order Component) ve modern React projelerinde sıkça tercih edilen useFormik hook’u. useFormik hook’u, bileşenlerinizin içerisinde Formik’in tüm gücüne fonksiyonel bileşenler aracılığıyla erişmenizi sağlar, bu da kodu daha okunaklı ve yönetilebilir hale getirir.

Yup: Şematik Validasyonun Gücü

Yup, JavaScript için bir şema doğrulama kütüphanesidir. Obje şemaları tanımlamanıza olanak tanır ve bu şemalar aracılığıyla verilerinizin belirli kurallara uyup uymadığını kontrol edebilirsiniz. Yup’ın temel avantajları şunlardır:

• Şema Tabanlı: Veri yapınızı ve her bir alan için geçerli olması gereken kuralları (zorunlu alan, minimum/maksimum uzunluk, e-posta formatı, sayısal değer vb.) tek bir JavaScript nesnesi olarak tanımlamanızı sağlar.
• Zincirlenebilir API: Her bir validasyon kuralını arka arkaya zincirleyerek, okunabilir ve güçlü validasyon şemaları oluşturabilirsiniz. Örneğin, string().required('Gerekli').min(3, 'En az 3 karakter olmalı') gibi.
• Yeniden Kullanılabilirlik: Bir kez tanımladığınız validasyon şemalarını uygulamanızın farklı yerlerinde veya farklı formlarda yeniden kullanabilirsiniz.
• Anlaşılır Hata Mesajları: Her validasyon kuralı için özel hata mesajları belirleyebilir, böylece kullanıcıya daha bilgilendirici geri bildirimler sunabilirsiniz.

Formik ve Yup arasındaki sinerji, her ikisinin de güçlü yanlarını birleştirerek React form validasyonunu sorunsuz hale getirir. Formik, form değerlerini ve state’ini yönetirken, Yup bu değerlerin doğruluğunu sağlamak için güçlü ve esnek bir validasyon katmanı sunar. Formik’in validationSchema prop’u aracılığıyla Yup şemasını doğrudan Formik’e bağlayabilirsiniz, böylece form gönderilmeden veya alanlar değiştirilirken otomatik olarak validasyon çalışır. Bu entegrasyon, geliştirme sürecini hızlandırır ve daha güvenilir, kullanıcı dostu formlar oluşturmanızı sağlar.

Adım Adım Uygulama: Formik ve Yup ile İlk Validasyonlu Formunuzu Oluşturun

Formik ve Yup’ı bir React projesine entegre etmek ve basit bir form oluşturmak oldukça kolaydır. İşte adım adım nasıl başlayacağınız:

Proje Kurulumu ve Kütüphane Yükleme

Öncelikle yeni bir React projesi oluşturalım (eğer halihazırda bir projeniz yoksa):

npx create-react-app formik-yup-demo
cd formik-yup-demo

Şimdi Formik ve Yup kütüphanelerini projemize ekleyelim:

npm install formik yup
# veya yarn kullanıyorsanız:
# yarn add formik yup

Temel Form Yapısı Oluşturma: useFormik Hook'u ile

useFormik hook'u, fonksiyonel React bileşenleri içinde Formik'in tüm özelliklerine erişmenizi sağlayan modern ve tavsiye edilen bir yöntemdir. Basit bir e-posta ve şifre giriş formu oluşturalım.

src/App.js dosyanızı aşağıdaki gibi güncelleyin:

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

function App() {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema: Yup.object({
      email: Yup.string()
        .email('Geçersiz e-posta adresi')
        .required('E-posta zorunludur'),
      password: Yup.string()
        .min(6, 'Şifre en az 6 karakter olmalı')
        .required('Şifre zorunludur'),
    }),
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
      console.log('Form gönderildi:', values);
    },
  });

  return (
    

      
Giriş Yap
      

        

          E-posta Adresi
          
          {formik.touched.email && formik.errors.email ? (
            
{formik.errors.email}
          ) : null}
        

        

          Şifre
          
          {formik.touched.password && formik.errors.password ? (
            
{formik.errors.password}
          ) : null}
        

        
          Giriş Yap
        
      
    
  );
}

export default App;

Bu kod bloğunda, useFormik hook'unu kullanarak formun ilk değerlerini (initialValues), Yup ile tanımlanmış validasyon şemasını (validationSchema) ve form gönderildiğinde çalışacak fonksiyonu (onSubmit) belirtiyoruz. formik objesi, form alanlarının değerlerine (formik.values), değişiklikleri yöneten fonksiyona (formik.handleChange), alanların odak kaybını yöneten fonksiyona (formik.handleBlur) ve formun gönderilmesini sağlayan fonksiyona (formik.handleSubmit) erişmemizi sağlar.

Gelişmiş Form Alanları ve Hata Gösterimi

Yukarıdaki örnekte, her input alanı için onChange, onBlur ve value prop'larını manuel olarak Formik'ten aldığımız değerlerle eşleştirdik. Ayrıca her hata mesajını, alanın touched (dokunulmuş) ve errors (hata var) durumunu kontrol ederek gösterdik. formik.touched.email kontrolü, kullanıcının o alana dokunup ayrıldıktan sonra hatanın gösterilmesini sağlar, bu da daha iyi bir kullanıcı deneyimi sunar. Kullanıcı henüz bir alanı doldurmaya başlamadan veya onu terk etmeden hata mesajları gösterilmesi can sıkıcı olabilir. Bu temel kurulum, Formik ve Yup'ın nasıl birlikte çalıştığını ve form validasyonunu ne kadar basitleştirdiğini göstermektedir. Bu sayede, karmaşık validasyon kurallarını bile okunabilir ve yönetilebilir bir şekilde tanımlayabilirsiniz. İlk formunuzu başarıyla oluşturdunuz ve validasyon gücünü hissetmeye başladınız!

Gerçek Dünya Vaka Analizi: Kapsamlı Bir Kayıt Formu Validasyonu

Basit bir giriş formunun ötesine geçerek, gerçek dünya senaryolarında karşılaşabileceğiniz daha karmaşık bir kayıt formunu Formik ve Yup ile nasıl valide edeceğinize bakalım. Bu örnekte, kullanıcı adı, e-posta, şifre, şifre tekrarı ve hizmet şartlarını kabul etme gibi alanlar içeren bir kayıt formu oluşturacağız. Bu senaryo, Yup'ın gelişmiş validasyon özelliklerini ve Formik ile entegrasyonunu daha derinlemesine anlamamızı sağlayacak.

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

function SignupForm() {
  const formik = useFormik({
    initialValues: {
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      termsAccepted: false,
    },
    validationSchema: Yup.object({
      username: Yup.string()
        .max(15, 'Kullanıcı adı en fazla 15 karakter olmalı')
        .required('Kullanıcı adı zorunludur'),
      email: Yup.string()
        .email('Geçersiz e-posta adresi')
        .required('E-posta zorunludur'),
      password: Yup.string()
        .min(8, 'Şifre en az 8 karakter olmalı')
        .matches(/[a-z]/, 'Şifre en az bir küçük harf içermeli')
        .matches(/[A-Z]/, 'Şifre en az bir büyük harf içermeli')
        .matches(/[0-9]/, 'Şifre en az bir rakam içermeli')
        .matches(/[^a-zA-Z0-9]/, 'Şifre en az bir özel karakter içermeli')
        .required('Şifre zorunludur'),
      confirmPassword: Yup.string()
        .oneOf([Yup.ref('password'), null], 'Şifreler eşleşmiyor')
        .required('Şifre tekrarı zorunludur'),
      termsAccepted: Yup.boolean()
        .oneOf([true], 'Hizmet şartlarını kabul etmelisiniz')
        .required('Hizmet şartlarını kabul etmelisiniz'),
    }),
    onSubmit: (values, { resetForm }) => {
      alert(JSON.stringify(values, null, 2));
      console.log('Kayıt Formu Gönderildi:', values);
      resetForm(); // Formu gönderdikten sonra sıfırla
    },
  });

  return (
    

      
Yeni Hesap Oluştur
      

        {/* Kullanıcı Adı */}
        

          Kullanıcı Adı
          
          {formik.touched.username && formik.errors.username ? (
            
{formik.errors.username}
          ) : null}
        

        {/* E-posta */}
        

          E-posta Adresi
          
          {formik.touched.email && formik.errors.email ? (
            
{formik.errors.email}
          ) : null}
        

        {/* Şifre */}
        

          Şifre
          
          {formik.touched.password && formik.errors.password ? (
            
{formik.errors.password}
          ) : null}
        

        {/* Şifre Tekrarı */}
        

          Şifre Tekrarı
          
          {formik.touched.confirmPassword && formik.errors.confirmPassword ? (
            
{formik.errors.confirmPassword}
          ) : null}
        

        {/* Hizmet Şartları */}
        

          
          Hizmet şartlarını kabul ediyorum
          {formik.touched.termsAccepted && formik.errors.termsAccepted ? (
            
{formik.errors.termsAccepted}
          ) : null}
        

        
          Kayıt Ol
        
      
    
  );
}

export default SignupForm;

Şifre Doğrulama ve Koşullu Validasyon

Yukarıdaki örnekte, özellikle şifre validasyonunda Yup'ın gücünü görüyoruz. Şifrenin en az 8 karakter olması, büyük/küçük harf, rakam ve özel karakter içermesi gibi karmaşık kuralları .matches() metodu ile Regex kullanarak kolayca tanımlayabiliyoruz. Ayrıca, confirmPassword alanı için .oneOf([Yup.ref('password'), null], 'Şifreler eşleşmiyor') kullanarak şifrelerin eşleşip eşleşmediğini kontrol ettik. Yup.ref('password'), aynı şema içindeki başka bir alanın değerine referans vermemizi sağlar, bu da dinamik ve koşullu validasyonlar için inanılmaz derecede kullanışlıdır. Son olarak, termsAccepted checkbox'ı için .oneOf([true], 'Hizmet şartlarını kabul etmelisiniz') ile kullanıcının bu kutuyu işaretlemesinin zorunlu olduğunu belirttik.

Bu vaka analizi, Formik ve Yup'ın sadece temel validasyonları değil, aynı zamanda gerçek dünya senaryolarında karşılaşılan karmaşık iş kurallarını da ne kadar esnek ve okunabilir bir şekilde ele alabildiğini gözler önüne seriyor. Bu yapıyla, kullanıcılarınıza güvenilir ve hatasız bir form deneyimi sunarken, geliştirme sürecinizi de önemli ölçüde hızlandırabilirsiniz.

Mobil Uyumlu Form Tasarımı İçin İpuçları

Günümüzde mobil cihazlardan erişilen web sitelerinin oranı göz önüne alındığında, formlarınızın mobil uyumlu olması vazgeçilmezdir. Yukarıdaki örnekte basit inline stiller kullandık, ancak gerçek bir projede CSS sınıfları ve medya sorguları (media queries) kullanmalısınız. Örneğin, form alanlarınızın küçük ekranlarda genişliğini %100 yaparken, daha büyük ekranlarda belirli bir maksimum genişliğe sahip olmasını sağlayabilirsiniz. Flexbox veya Grid gibi CSS özelliklerini kullanarak form elemanlarını düzenlemek, farklı ekran boyutlarında düzenin bozulmamasını sağlayacaktır. Etiketlerin (labels) her zaman ilgili giriş alanlarının üzerinde veya yanında yer almasına dikkat edin ve hata mesajlarının okunaklı ve erişilebilir olduğundan emin olun. Örneğin, bir mobil cihazda kullanıcıların dokunmatik ekranları daha rahat kullanabilmesi için buton ve input alanlarının boyutları yeterince büyük olmalıdır. Bu tür tasarım yaklaşımları, formlarınızın her cihazda kusursuz bir deneyim sunmasını garantiler.

Performansı Artırma ve En İyi Uygulamalar: İleri Seviye Formik & Yup İpuçları

Formik ve Yup'ı etkili bir şekilde kullanmak, sadece form oluşturmakla kalmaz, aynı zamanda performanslı, erişilebilir ve sürdürülebilir uygulamalar geliştirmeyi de içerir. İşte deneyimli geliştiriciler için bazı ileri düzey ipuçları ve en iyi uygulamalar:

Formik Bileşenlerini Kullanarak Daha Temiz Kod Yazma

useFormik hook'u oldukça güçlü olsa da, Formik aynı zamanda ,

• Bileşeni: useFormik hook'unun alternatifidir ve render prop veya child prop desenini kullanarak çalışır. Özellikle sınıf bileşenlerinde veya daha karmaşık form yapılarında tercih edilebilir.
• Bileşeni: HTML
  
  etiketinin Formik sürümüdür. onSubmit prop'unu manuel olarak eklemenize gerek kalmaz, Formik bunu otomatik olarak yönetir.
• Bileşeni: Input, select veya textarea gibi form elemanlarını sarar ve onChange, onBlur, value gibi prop'ları otomatik olarak Formik'ten alır. Bu, her input için bu prop'ları tek tek yazmaktan kurtarır.
• Bileşeni: Belirli bir alan için validasyon hatası olduğunda hata mesajını otomatik olarak gösterir. Yalnızca alan touched (dokunulmuş) ve bir error (hata) mevcutsa görünür.

Bu bileşenleri kullanarak kodunuzu nasıl daha temiz hale getirebileceğinize dair bir örnek:

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

const AdvancedSignupForm = () => (
  

    
Gelişmiş Kayıt Formu
     {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        

          

            Kullanıcı Adı
            
            
          

          

            E-posta Adresi
            
            
          

          

            Şifre
            
            
          

          
            {isSubmitting ? 'Gönderiliyor...' : 'Kayıt Ol'}
          
        
      )}
    
  
);

export default AdvancedSignupForm;

Asenkron Validasyon ve Performans Optimizasyonları

Bazı durumlarda validasyonun sunucu tarafında yapılması gerekebilir (örneğin, kullanıcı adının daha önce alınıp alınmadığını kontrol etmek). Formik, validate fonksiyonunda Promise dönerek asenkron validasyonu destekler. Ancak, her karakter girişinde sunucuya istek göndermek performansı olumsuz etkileyebilir. Bu gibi durumlarda, debounce veya throttle gibi teknikleri kullanarak isteklerin sıklığını sınırlamak önemlidir.

Performans için diğer ipuçları:

• Yup Şemalarını Memoize Edin: Karmaşık Yup şemalarınız varsa, bunları bileşen dışında tanımlayın veya useMemo hook'u ile memoize edin. Her render'da yeniden oluşturulmasını engeller.
• shouldUpdate ve compare Fonksiyonları: Formik, yeniden render optimizasyonları için shouldUpdate ( bileşeninde) veya compare (useFormik hook'u için kendi özel memo kullanımı) gibi seçenekler sunar. Ancak, genellikle Formik'in varsayılan optimizasyonları çoğu durum için yeterlidir.

Erişilebilirlik (Accessibility) ve Test Edilebilirlik

Formlar, erişilebilirlik açısından sıkça sorun yaşanan alanlardır. htmlFor etiketlerini doğru kullanmak, hata mesajlarının ekran okuyucular tarafından okunabilir olmasını sağlamak (aria-live region'lar ile), ve klavye navigasyonunu kolaylaştırmak (tab order) kritik öneme sahiptir. Formik ve Yup, bu konuda doğrudan bir çözüm sunmasa da, geliştiricinin bu iyi uygulamaları kolayca entegre etmesine olanak tanır. Ayrıca, Formik'in iç state'ine ve method'larına erişim kolaylığı sayesinde, formlarınızı unit ve entegrasyon testleri ile test etmek oldukça basittir.

Bu ileri düzey ipuçları, Formik ve Yup ile sadece fonksiyonel değil, aynı zamanda sağlam, performanslı ve kullanıcı dostu React formları geliştirmenize yardımcı olacaktır. Unutmayın, iyi bir form deneyimi, uygulamanızın genel kalitesini önemli ölçüde artırır.

Sonuç: React Form Validasyonunda Formik ve Yup'ın Yeri

React uygulamalarında form yönetimi ve validasyonu, kullanıcı deneyiminin temel taşlarından biridir. Bu rehber boyunca, Formik ve Yup'ın bu süreci nasıl basitleştirdiğini, geliştirme verimliliğini nasıl artırdığını ve aynı zamanda sağlam, güvenilir formlar oluşturmaya nasıl yardımcı olduğunu detaylı bir şekilde inceledik. Formik'in state yönetimi konusundaki gücü ve Yup'ın şematik validasyon konusundaki esnekliği, bir araya geldiğinde geliştiricilere eşsiz bir çözüm sunar. Basit giriş formlarından karmaşık kayıt senaryolarına kadar her türlü ihtiyaca cevap verebilen bu ikili, React form validasyonunu geleceğe taşıyan modern bir yaklaşımdır. Daha az boilerplate kod, daha okunaklı ve sürdürülebilir bir yapı, otomatik hata yönetimi ve kapsamlı validasyon seçenekleri sayesinde, geliştiriciler artık form karmaşıklığıyla boğuşmak yerine, kullanıcılarına en iyi deneyimi sunmaya odaklanabilirler. Formik ve Yup ile React formlarınızı bir sonraki seviyeye taşımak için artık gerekli bilgi ve araçlara sahipsiniz.

Sıkça Sorulan Sorular

• S: Formik ve Yup neden birlikte kullanılır?

  C: Formik, form state'ini (değerler, hatalar, dokunulmuş alanlar) yönetirken, Yup bu form değerleri için şema tabanlı validasyon kuralları tanımlar. Formik'in validationSchema prop'u, Yup şemalarını doğrudan entegre etmeyi kolaylaştırarak bu iki kütüphanenin kusursuz bir uyum içinde çalışmasını sağlar.

• S: Formik kullanmak yerine kendi state yönetimiyle validasyon yapabilir miyim?

  C: Evet, yapabilirsiniz. Ancak, Formik, initialValues, handleChange, handleBlur, handleSubmit, errors ve touched gibi birçok yaygın form işlevselliğini sizin için halleder. Bu, çok fazla boilerplate kod yazmanızı engeller ve geliştirme sürecinizi önemli ölçüde hızlandırır. Kendi çözümünüzü yazmak, özellikle karmaşık formlar için daha fazla zaman ve emek gerektirecektir.

• S: Yup yerine başka bir validasyon kütüphanesi kullanabilir miyim?

  C: Kesinlikle! Formik, kendi özel validasyon fonksiyonlarınızı veya başka bir validasyon kütüphanesini (örneğin, Joi veya Validator.js) entegre etmenize olanak tanır. Ancak Yup, Formik ile doğal bir entegrasyona sahiptir ve şema tabanlı yapısıyla oldukça popüler ve güçlü bir seçenektir.

• S: Formik ile asenkron validasyon nasıl yapılır?

  C: Formik'in validate prop'una veya Yup şemanızın içinde .test() metoduna asenkron bir fonksiyon sağlayarak asenkron validasyon yapabilirsiniz. Bu fonksiyon bir Promise döndürmeli ve validasyon başarılıysa boş bir obje, hata varsa hata mesajlarını içeren bir obje döndürmelidir.

• S: Formu gönderdikten sonra değerleri nasıl sıfırlayabilirim?

  C: onSubmit fonksiyonunuzda, ikinci argüman olarak gelen formikBag objesindeki resetForm metodunu çağırarak form değerlerini initialValues değerlerine geri döndürebilirsiniz. Örneğin: onSubmit: (values, { resetForm }) => { // işlemler... resetForm(); }.