React İle Bileşen Bazlı Çok Adımlı Bir Kayıt Formu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Çalışmaya başlamadan önce sisteminizde Node.js'in güncel bir sürümünün (LTS) kurulu olması gerekir. React projenizi oluşturmak için Vite kullanmanızı öneririz; zira Vite, hızlı geliştirme sunucusu ve modern yapılandırma seçenekleri ile 2026 standartlarında standarttır.

• Node.js (v20 veya üzeri)
• React 19+ (Hooks ve Concurrent Features desteği)
• Paket yöneticisi olarak npm veya pnpm
• Temel düzeyde TypeScript bilgisi (Kod kalitesini artırmak için önerilir)

Projenizi başlatmak için terminalde şu komutu çalıştırın:

npm create vite@latest multi-step-form -- --template react-ts
cd multi-step-form
npm install

Adım 1: Form Veri Yapısını ve Durum Yönetimini Oluşturma

Çok adımlı formlarda en kritik nokta, verinin nerede saklanacağıdır. Tüm form verilerini ana bileşende (App veya Parent) bir "state" nesnesi olarak tutmak, adımlar arası geçişte verinin kaybolmamasını sağlar. Aşağıdaki örnekte, merkezi bir durum yönetimi için useState kancasını nasıl kullanacağımızı göreceksiniz.

import { useState } from 'react';

export default function FormContainer() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    address: ''
  });

  const updateFields = (fields: Partial) => {
    setFormData(prev => ({ ...prev, ...fields }));
  };

  return { formData, updateFields };
}

Bu yapı, formun herhangi bir adımında girilen verinin, diğer adımlara geçildiğinde korunmasını garantiler. Partial kullanımı, sadece güncellenen alanların gönderilmesine olanak tanır.

Adım 2: Çok Adımlı Navigasyon Mantığını Kurma

Formun hangi adımda olduğunu takip etmek için bir sayaç (index) kullanacağız. "İleri" ve "Geri" butonları, bu indeksi güncelleyerek ekranda hangi bileşenin görüneceğini belirler. Bu mantığı bir "Custom Hook" içinde toplamak, kodunuzun temiz kalmasını sağlar.

import { useState } from 'react';

export function useMultiStepForm(steps: React.ReactElement[]) {
  const [currentStepIndex, setCurrentStepIndex] = useState(0);

  function next() {
    setCurrentStepIndex(i => (i >= steps.length - 1 ? i : i + 1));
  }

  function back() {
    setCurrentStepIndex(i => (i  (
  

    İsim
     updateFields({ firstName: e.target.value })} 
    />
  
);

Bu bileşen, ana durumdan aldığı updateFields fonksiyonunu kullanarak veriyi günceller. Bu "prop drilling" (veriyi alt bileşenlere aktarma) yöntemini yönetmek için ileride Context API veya Zustand gibi kütüphaneler düşünebilirsiniz.

Adım 4: Form Yönetimi Yöntemlerinin Karşılaştırılması

Çok adımlı formlar oluştururken kullanılan farklı yaklaşımların avantaj ve dezavantajlarını aşağıdaki tabloda inceleyebilirsiniz.

Adım 5: Güvenlik ve Doğrulama (Validation)

Form verilerini işlerken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Kullanıcıdan gelen veriyi asla doğrudan DOM'a yansıtmayın. Ayrıca, form gönderiminde mutlaka sunucu tarafında doğrulama yapın. İstemci tarafı doğrulama sadece kullanıcı deneyimi içindir.

Kritik Uyarı: İstemci tarafındaki doğrulama (validation) tek başına güvenlik sağlamaz. Gönderilen verileri sunucu tarafında (Node.js/Express vb.) mutlaka tekrar doğrulayın ve veritabanına kaydetmeden önce temizleyin (sanitization).

const handleSubmit = (e) => {
  e.preventDefault();
  if (!formData.email.includes('@')) {
    alert("Geçerli bir e-posta girin!");
    return;
  }
  // Veriyi API'ye gönder
};

Sıkça Sorulan Sorular

Form verilerini sayfayı yenileyince nasıl koruyabilirim?

Tarayıcının localStorage özelliğini kullanarak verileri yerel olarak saklayabilir ve bileşen yüklendiğinde useEffect ile geri çağırabilirsiniz.

Büyük formlarda performans sorunu yaşar mıyım?

Evet, her tuş vuruşunda tüm formun re-render olması performans kaybına yol açar. Bunu engellemek için React.memo kullanabilir veya form kütüphaneleri (React Hook Form gibi) tercih edebilirsiniz.

Adımlar arasında animasyon ekleyebilir miyim?

Evet, framer-motion kütüphanesini kullanarak adımlar arası geçişlere yumuşak animasyonlar ekleyebilirsiniz.

Hata mesajlarını nasıl yönetmeliyim?

Her alan için bir hata durumu tutan ayrı bir errors nesnesi oluşturmak ve bunu form verisiyle birlikte yönetmek en temiz yoldur.

Bu yapı mobil cihazlarda çalışır mı?

Evet, bileşen bazlı yapımız CSS Media Queries ile uyumlu olduğu sürece mobil cihazlarda tam performansla çalışacaktır.

İleri Seviye Optimizasyon: Form Verilerini Kalıcı Hale Getirme

Kullanıcı deneyimini iyileştirmek için, çok adımlı formlarda kullanıcının yanlışlıkla sayfayı yenilemesi veya tarayıcıyı kapatması durumunda verilerin kaybolmaması kritik bir öneme sahiptir. Bu senaryoda localStorage kullanarak verileri anlık olarak tarayıcı hafızasına kaydedebiliriz.

Aşağıdaki özel kanca (custom hook), form durumunu her değişiklikte otomatik olarak yerel depolama alanına yazar:

import { useState, useEffect } from 'react';

export const usePersistedForm = (key, initialValue) => {
  const [formData, setFormData] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(formData));
  }, [key, formData]);

  return [formData, setFormData];
};

Birim Testleri ile Form Güvenilirliğini Artırma

Çok adımlı formlar karmaşık mantıklar içerdiği için, adımlar arası geçişlerin ve veri doğrulama süreçlerinin test edilmesi hata payını minimize eder. Jest ve React Testing Library kullanarak formun doğru çalışıp çalışmadığını şu şekilde test edebilirsiniz:

import { render, screen, fireEvent } from '@testing-library/react';
import MultiStepForm from './MultiStepForm';

test('ileri butonuna basıldığında ikinci adıma geçiş yapmalı', () => {
  render();
  
  const nextButton = screen.getByText(/İleri/i);
  fireEvent.click(nextButton);
  
  const stepTwoHeader = screen.getByText(/Adım 2/i);
  expect(stepTwoHeader).toBeInTheDocument();
});

Test Stratejileri

• Birim Testleri: Her bir form alanının (input) validasyon kurallarını ayrı ayrı test edin.
• Entegrasyon Testleri: Formun tüm adımları tamamlandığında onSubmit fonksiyonunun doğru veriyi döndürdüğünü doğrulayın.
• Mock API Testleri: Form gönderimi sırasında oluşabilecek ağ hatalarını (400, 500) simüle ederek hata mesajlarının kullanıcıya ulaştığından emin olun.

Formlarda Performans İzleme ve İyileştirme

Büyük formlarda her tuş vuruşunda tüm bileşen ağacının yeniden render edilmesi performans kayıplarına yol açabilir. Bu sorunu aşmak için React.memo ve useCallback kullanarak gereksiz render işlemlerini engelleyebilirsiniz.

İpucu: Eğer formunuz 10'dan fazla adımdan oluşuyorsa, verileri merkezi bir durum yönetim aracı (Zustand veya Redux Toolkit gibi) ile yönetmek, bileşenler arası veri taşıma yükünü hafifletecektir.

Sonuç

React ile bileşen bazlı çok adımlı bir kayıt formu oluşturmak, projenizin ölçeklenebilirliğini ve kod kalitesini doğrudan artırır. Bu rehberde öğrendiğiniz durum yönetimi, özel kancalar (custom hooks) ve bileşen modülerliği, profesyonel seviyede formlar geliştirmeniz için temel oluşturur. Bir sonraki adım olarak, React Hook Form ve Zod kütüphanelerini entegre ederek daha karmaşık doğrulama kurallarını nasıl uygulayacağınızı araştırmanızı öneririm.

Yasal Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamındaki uygulamalarınızda, verilerin güvenliği, şifreleme (hashing) ve yetkilendirme süreçlerinde profesyonel güvenlik standartlarını (OWASP vb.) takip etmeniz sorumluluğunuzdadır.