Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Angular Geliştiricisi için React: Library mi Framework mü, Zihinsel Model Farkları ve Ekosistem Haritası
React bir framework değil, UI library'si: component, state ve render'ı veriyor; router, veri çekme, form ve global state'i ekip ekosistemden seçiyor. Bookstore'un kitap kartını Angular ve React'te yan yana yazıyor, bir tıklamada React'in component fonksiyonunu yeniden çağırıp DOM'da yalnız iki text node'u değiştirdiğini gerçek çıktıyla gösteriyor, Angular kavramlarının React karşılıklarını tablo hâlinde veriyoruz.
İlk React Projesi: Vite + TypeScript, Proje Yapısı, StrictMode ve React DevTools
Vite'ın react-ts template'i, feature klasörleri ve Vite 8'in resolve.tsconfigPaths ayarıyla tek kaynaktan @/ alias'ı, Oxlint'in hook kuralları ve /api isteklerini Bookstore API'ye aktaran dev proxy ile seriye yetecek bir proje iskeleti kuruyoruz. StrictMode'un geliştirmede render'ı iki kez, effect'i kurulum-temizlik-kurulum sırasıyla çalıştırdığını, production build'de ise her şeyin bir kez çalıştığını ve proxy olmadan tarayıcının CORS yüzünden yanıtı okumadığını gerçek çıktılarla gösteriyoruz.
JSX ve Component'ler: Template Yerine JavaScript, Props, children ve Liste Render'ı
JSX bir template dili değil, build sırasında _jsx() çağrılarına derlenen JavaScript'tir; koşul için &&, ternary ve erken return, liste için map ve verinin kendi kimliğinden gelen key kullanılır. Bookstore'un BookCard, BookList ve Layout component'lerinde props'u tipliyor, children ile ng-content'in karşılığını kuruyor; key={index}'in notu yanlış kitaba taşıdığını, 0 && ifadesinin ekrana 0 yazdığını ve dangerouslySetInnerHTML'in onerror kodunu çalıştırdığını gerçek koşularla gösteriyoruz.
React'te Event'ler ve State: useState, Immutable Update ve Re-render Ne Zaman Olur?
React'te state render başına bir snapshot'tır: setState değişkeni değiştirmez, bir sonraki render'ı ister; önceki değerden hesaplanan güncelleme için updater fonksiyonu, object ve array için her zaman yeni referans gerekir. Bookstore kataloğuna adet seçici ve sepet ekleyip setAmount(amount + 1)'in üç çağrıda 2 verdiğini, mutate edilen sepetin ekrana geç geldiğini ve tek event'teki üç güncellemenin tek render'a indiğini render log'larıyla gösteriyoruz.
State'i Nerede Tutmalı? Lifting State Up, Controlled Input'lar, Türetilmiş State ve useReducer
State, ona ihtiyaç duyan component'lerin en yakın ortak atasında yaşamalı; hesaplanabilen değer state'e konmaz, kopya yerine kimlik saklanır, prop değişince sıfırlanacak state için key verilir. Bookstore kataloğunda sepeti App'e taşıyıp useReducer ve discriminated union ile tip güvenli bir reducer'a çeviriyor, ayrı tutulan toplamın silmede yanlış kaldığını, key'siz detay panelinin notu başka kitaba taşıdığını ve reducer'ın Node.js'te doğrudan çalıştığını gerçek çıktılarla gösteriyoruz.
useEffect'i Doğru Kullanmak: Synchronization, Cleanup, Dependency Array ve "Effect'e İhtiyacın Olmayabilir"
useEffect bir lifecycle hook'u değil, component'i dış bir sistemle senkronize etme aracıdır: her setup'ın bir cleanup'ı olur, dependency array effect'in okuduğu reaktif değerlerin listesidir. Bookstore kataloğunu API aramasına bağlayıp debounce ve AbortController ile StrictMode'da bile tek istek gittiğini, cleanup'sız sürümde geciken yanıtın listeyi ezdiğini, effect ile türetilen sayının render'ı ikiye katladığını ve useEffectEvent'in gereksiz isteği önlediğini gösteriyoruz.
useRef, Context ve Custom Hook'lar: DOM Erişimi, DI Yerine Context ve Hook Kuralları
useRef render tetiklemeyen bir kutudur (DOM node'u ya da timer id'si), Context ise bir değeri ağacın derinlerine props'suz taşır ve değişince onu okuyan her component'i render eder. Bookstore'da sepet, tema ve kullanıcıyı Context'e taşıyıp tema değişiminin 2 yerine 28 component render ettirdiği sürümü ölçüyor, inline ref callback'inin odak kaçırdığını, koşullu hook'un uygulamayı çökerttiğini ve aramayı custom hook'lara ayırmayı gösteriyoruz.
React'te Veri Çekmek: fetch + Effect'ten TanStack Query'ye, Suspense ve use()
Effect ile veri çekmek cache, deduplication, retry ve invalidation vermez; TanStack Query bunları query key etrafında toplar. Bookstore kataloğunu ve sunucu tarafı sepeti TanStack Query'ye taşıyıp geri dönülen aramanın cache'ten geldiğini, optimistic update'in 500'de geri alındığını, 409 Problem Details'ın kullanıcıya gösterildiğini, Suspense'in 300 ms'lik gösterim aralığını ve render içinde oluşturulan promise'in use() ile üç saniyede 3.739 istek attığını ölçüyoruz.
React Router 8 ile Routing: Route'lar, Nested Layout, URL Parametreleri, Loader/Action ve Lazy Route
React Router 8'in data mode'unda route'lar createBrowserRouter'a object olarak verilir; layout route'u ve Outlet ile iç içe sayfalar, loader ile route'a girmeden önce veri, middleware ile guard, action ile form ve lazy ile code splitting elde edilir. Bookstore'u URL'lere bölüp aramayı query string'e taşıyor, aynı route'ta key'siz state'in sonraki kitaba taşındığını, lazy chunk'ın middleware yönlendirmesinden önce indiğini ve static sunucuda SPA fallback'in neden şart olduğunu gösteriyoruz.
React'te Form'lar: Controlled Input, Form Action'ları, useActionState, useFormStatus ve react-hook-form + zod
Küçük formlar için React 19'un form action'ları (useActionState, useFormStatus, useOptimistic) yeterli; kalemli ve iç içe formlarda react-hook-form ile zod şeması daha az kod ve daha az render demek. Bookstore'un sipariş formunda controlled sürümün her tuşta render ettiğini, action'ın doğrulama hatasından sonra formu sıfırladığını, useOptimistic'in hata olunca kendiliğinden geri döndüğünü ve Problem Details hatalarının alanlara eşlenip odağın taşındığını gösteriyoruz.
React'te Global State: Context'in Sınırları, Zustand ve Ne Zaman Redux Toolkit?
Çoğu "global state" aslında server, URL ya da form state'idir; gerçekten global olan küçük client state için Zustand'ın selector'lı store'u Context'in her okuyanı render etme sorununu çözer, Redux Toolkit ise action log ve büyük ekip kuralları gerektiğinde gelir. Bookstore'da son bakılan kitapları ve sepet id'sini persist edilen bir store'a taşıyıp selector'sız okumanın 1 yerine 13 render ürettiğini ve yeni object döndüren selector'ın Zustand 5'te sonsuz döngüye girdiğini gösteriyoruz.
React'te Performans: Re-render'ı Anlamak, memo, useMemo, useCallback, React Compiler ve Profiler
Re-render'ı azaltmak ancak ölçülen bir maliyet varsa işe yarar ve çoğu zaman asıl maliyet React'in değil tarayıcının DOM işidir. Bookstore'un 5.000 satırlık stok sayfasında memo ve useCallback'in satır render'larını 5.000'den 1'e indirdiğini, inline callback'in bunu sildiğini, React Compiler'ın render süresini yarıya indirdiğini ama tıklamanın 400 ms'de kaldığını, virtualization'ın ise onu 40 ms'ye düşürdüğünü; ayrıca useDeferredValue ve Activity'nin etkisini ölçüyoruz.