React ile SPA Gelistirme: Best Practice Rehberi

React ile SPA geliştirme, "create-react-app ile başla" günlerinden çok farklı bir yere evrildi. 2026'da React 19, ekosistemin olgunluğu ve Vite, Zustand, TanStack gibi araçlarla ciddi ölçekli single-page uygulamalar sürdürülebilir biçimde üretilebiliyor. Bu yazıda ölçeklenebilir React SPA'lar için component mimarisi, state yönetimi, performance ve test disiplinini inceliyoruz.

Component Mimarisi: Organizasyon Ölçeklenebilirliği Belirler

React'ın yazılması kolay, ölçeklenmesi zor. 50.000 satırlık bir codebase'de component organizasyonu sürdürülebilirliği doğrudan etkiler. Pratik yapı:

• Feature-first klasör: features/auth/, features/checkout/ — domain bazlı ayrım
• Shared layer: shared/ui/ design system bileşenleri, shared/hooks/, shared/utils/
• Presentational vs container: Hooks ile business logic ayrılırsa, dumb component'lar kolay test edilir
• Colocation: Component'ın test, styles, stories dosyaları yanında durur

Component isimlendirme disiplini: PascalCase dosya adı, default export component, named export types. Her component tek bir iş yapar — 400 satırlık bir component, decomposition ihtiyacıdır.

Barrel file (index.ts tüm export'ları toplar) tartışmalı — küçük feature'larda yararlı, büyük uygulamalarda tree-shaking bozabilir. Direct import tercih edilebilir.

State Yönetimi: Seçim Kararı

2026'da React state yönetiminin manzarası:

• Local state (useState): Varsayılan ilk seçim. Component-local veri için
• Context API: Tema, auth gibi az değişen global state için. Sık değişen state'te performans maliyetli
• Zustand: Minimal, hook-based, boilerplate'siz. Orta-büyük uygulamalar için sweet spot
• Redux Toolkit: Büyük ekipler, strict pattern, devtools değerli
• Jotai / Recoil: Atomic state, granular re-render kontrolü
• TanStack Query (React Query): Server state için standart. Client state ile karıştırılmamalı

Kritik ayrım: client state (UI preferences, form input) ve server state (API'den gelen veri) farklı araçlar ister. Zustand + TanStack Query kombinasyonu, modern bir React SPA için güçlü ve disiplinli bir seçim.

Routing: React Router vs TanStack Router

React Router v6/v7 yıllardır standart; 2024-2025 itibariyle TanStack Router alternatifi olgunlaştı:

• React Router: Geniş kullanım, data loader'ları, nested routing. Ekosistem geniş
• TanStack Router: Tip-güvenli, file-based opsiyonel, loader/search params first-class

Tip güvenliği öncelik ise TanStack Router güçlü tercih. Ekosistem olgunluğu ve adaptasyon kolaylığı için React Router hala güvenli seçim.

Performance Optimizasyonu

SPA'ların kötü şöhreti yavaş ilk yüklenme. Bunu değiştiren önlemler:

• Code splitting: Route bazlı React.lazy + Suspense — her sayfanın kendi bundle'ı
• Image optimization: AVIF/WebP, responsive srcset, lazy loading (native loading="lazy")
• Virtualization: 100+ satırlı listelerde react-virtual veya TanStack Virtual
• Memoization disiplini: useMemo ve useCallback'i problem çözmek için kullan, "preemptive" değil
• React 19 Compiler: Otomatik memoization — useMemo/useCallback kullanımını minimize ediyor
• Bundle analiz: vite-bundle-visualizer veya benzeri ile aylık kontrol

Core Web Vitals hedefi: LCP < 2.5s, INP < 200ms, CLS < 0.1. Bunlar hem kullanıcı deneyimi hem SEO için kritik.

Testing Stratejisi

Test piramidi React SPA için:

• Unit test (Vitest, Jest): Pure fonksiyonlar, custom hooks, utilities
• Component test (React Testing Library): Component render + interaction davranışı
• Integration test: Feature-level akış — auth flow, checkout flow
• E2E test (Playwright): Kritik user journey'ler, tam browser'da

Test disiplini: Her PR minimum değişen kod için test getirir. Coverage hedefi %70-80 realistik. %100 zorunluluk tuzak — low-value test yazma baskısı yaratır.

Mock kullanımı minimize: Gerçek API yerine MSW (Mock Service Worker) ile network mock. Backend tamamen mock'lanmış birim testler, prodüksiyonda gerçek bug'ları kaçırır.

Form Yönetimi

Form'lar React'ın tarihi pain point'lerinden. 2026 için olgun araçlar:

• React Hook Form: Minimum re-render, validation integration, geniş kullanım
• TanStack Form: Type-first, validation-first
• Zod: Schema validation, form + API arasında tek doğruluk kaynağı

Gerçek Mimari Örneği

Bir B2B dashboard SaaS uygulaması (~80K satır):

• Build: Vite + TypeScript + Tailwind
• Routing: React Router v7 + lazy routes
• State: Zustand (UI) + TanStack Query (server)
• Form: React Hook Form + Zod
• UI: Radix UI primitives üzerine custom design system
• Test: Vitest + RTL, Playwright kritik path
• Deploy: Cloudflare Pages, API ayrı (Node + Fastify)