Giriş — Neden React performansı önemlidir?

Web geliştirme projelerinde uygulama hızı doğrudan kullanıcı deneyimini ve dönüşümleri etkiler. React uygulamalarında performans optimizasyonu, yalnızca başlangıç yükleme süresini azaltmakla kalmaz; etkileşim gecikmelerini, gereksiz render’ları ve bellek kullanımını da iyileştirir. Bu rehberde öncelikle ölçmeyi, sonra optimize etmeyi öğreneceksiniz; ayrıca kod bölme, lazy loading, profil oluşturma ve Redux özel optimizasyonları için uygulanabilir adımlar yer alacak.

Ölçmeden optimize etmeyin — Profil oluşturma adımları

Her optimizasyona başlamadan önce uygulamanın hangi kısmının yavaş olduğunu belirleyin. Profil oluşturma süreci genel olarak şu adımları içerir:

1. Kullanıcı senaryosunu belirleyin (ilk yük, sayfa geçişi, ağır liste filtreleme vb.).
2. Tarayıcı performans araçları (Chrome DevTools Performance / Lighthouse) ile ölçüm alın.
3. React DevTools Profiler ile bileşen düzeyinde zaman alan render'ları tespit edin. Redux odaklı uygulamalar için Redux belgelerindeki performans rehberleri profiler kullanımına dair faydalı örnekler içerir: Redux — Performance ve Normalizasyon.
4. Önceliklendirme yapın: en çok zaman alan veya en sık gerçekleşen darboğazları önce ele alın.

Profil sonuçlarını yorumleme

Profiler çıktısında dikkat edilecekler:

• Büyük ve sık render olan bileşenler (özellikle parent bileşenler),
• render süresine katkısı yüksek olan prop değişiklikleri,
• CPU ağırlıklı işlemler (seri hale getirme, büyük döngüler) ve
• Ağ beklemeleri ya da büyük başlangıç bundle’ları.

Kod bölme ve lazy loading (bundle azaltma)

Kod bölme (code splitting) ve lazy loading, başlangıç bundle boyutunu küçültmek için en etkili yöntemlerden biridir. Dinamik import'lar ve React.lazy + Suspense kombinasyonu ile bileşenleri sadece ihtiyaç olduğunda yükleyebilirsiniz. Webpack’in lazy loading rehberi konuyla ilgili pratik örnekler sunar: webpack - Lazy Loading.

Basit bir örnek akış:

• Rota tabanlı split: Router üzerinden her rota için ayrı chunk oluşturun (ör. admin paneli, kullanıcı profil sayfası),
• Nadir kullanılan bileşenler (modallar, büyük grafik kütüphaneleri) lazy yüklenebilir,
• Vendor (üçüncü taraf) paketlerini ayırmak için chunk ayrımı düşünün ve gerektiğinde CDN kullanın.

Örnek (kısa gösterim): const Foo = React.lazy(() => import('./Foo')); ve <Suspense fallback=<Spinner />><Foo /></Suspense>.

Ne zaman lazy loading uygulamalısınız?

Lazy loading için iyi adaylar: uygulamayı açarken zorunlu olmayan sayfalar, nadiren kullanılan özellikler, büyük üçüncü taraf kütüphaneleri ve büyük medya/sözleşleme modülleridir. Ancak çok küçük bileşenleri aşırı lazy yapmak, fazladan ağ isteği yükü getirebilir; bu yüzden ölçüm şarttır.

Redux ile performans: State normalizasyonu ve memoize edilmiş selector'ler

Redux kullanan uygulamalarda state yapısını doğru kurmak performans için kritiktir. Redux belgeleri, verinin normalize edilmesini ve memoize edilmiş selector kullanımını önerir; bu yaklaşımlar gereksiz render’ları azaltır ve selector'ların yalnızca ilgili veriler değiştiğinde yeniden hesaplanmasını sağlar. Detaylı rehber için bakınız: Redux — Performance FAQ ve Redux Essentials Part 6.

Uygulama adımları:

1. Veriyi normalize ederek id-tabani bir yapı kurun (ör. entities: { users: {byId, allIds}, posts: {...} }),
2. Derived data (türev veri) store'da tutmayın; selector ile hesaplayın,
3. Reselect gibi memoize kütüphaneler veya benzer yöntemlerle selector'ları sarmalayın,
4. mapStateToProps ya da useSelector içinde seçicileri dikkatli kullanın; gereksiz seçiciler prop değişikliklerine yol açar.

React seviyesinde pratik optimizasyonlar

• React.memo: Saf bileşenler için sarmalayarak prop'lar değişmedikçe yeniden render'ı önleyin. Ancak prop referansları sıklıkla değişiyorsa (ör. inline fonksiyonlar/nesneler) beklenen fayda olmayacaktır.
• useMemo / useCallback: Hesaplama maliyeti yüksek değerleri veya fonksiyon referanslarını memoize etmek için kullanın, fakat gereksiz kullanımdan kaçının.
• Key kullanımı: Listelerde stabil ve benzersiz key'ler kullanın; yanlış key'ler DOM yeniden kullanımını engeller.
• Event ve state tasarımı: Olay işleyicilerini bileşen dışına taşıyarak yeniden oluşturulmayı azaltın; sık değişen state'leri mümkünse local state yerine uygun scope'da tutun. MDN kaynakları event ve state yönetimi konusunda pratik referanslar sunar: React interactivity: Events and state - MDN.

Stilleri yönetme

Component bazında stiller tanımlamak, stil çatışmalarını azaltır ve stil yükünü kontrol etmeyi kolaylaştırır. MDN'in React kaynakları, bileşenleşme ve stil yaklaşımları hakkında yararlı bilgiler içerir: React resources - MDN. CSS bundling, kritik CSS ve statik önbellekleme stratejileri ile birlikte stil yönetimini ele alın.

Conditional rendering ve liste filtreleme

Kullanıcı arayüzünde koşullu render ve filtreleme kararları performansı etkileyebilir. Gereksiz filtrelemeleri render döngüsünden çıkarın ve büyük listeler için sanallaştırma (virtualization) düşünün. MDN'in conditional rendering rehberi, doğru yaklaşımı seçmenize yardımcı olabilir: React conditional rendering - MDN.

Kontrol Listesi (Hızlı uygulama adımları)

Gerçek dünya örnek adımı (kısa vaka)

Senaryo: İlk yükleme süresi yüksek ve uygulama ana sayfada yavaş.

1. Profiler ile hangi chunk'ların yüklendiğini ve hangi bileşenlerin uzun render sürelerine sahip olduğunu belirleyin.
2. Eğer başlangıç bundle çok büyükse, rota tabanlı kod bölme uygulayın (lazy load). Kaynak: webpack lazy loading rehberi: https://v4.webpack.js.org/guides/lazy-loading/.
3. Redux kullanıyorsanız state yapısını gözden geçirip normalize edin; gereksiz büyük objeleri azaltın ve memoize selector’lar kullanın (bkz. Redux Performance FAQ).
4. Değişiklik sonrası yeniden profil alın ve uygulamanın hangi metriklerde iyileştiğini karşılaştırın.

Sonuç ve öneriler

Performans optimizasyonu ölçüm + küçük, hedefli değişiklik + yeniden ölçüm döngüsünden oluşur. Kod bölme ve lazy loading başlangıçtaki en yüksek kazancı sağlar; Redux kullanan uygulamalarda state normalizasyonu ve memoize selector'lar tekrarlayan render'ları azaltır. Bu makalede belirtilen yaklaşımları adım adım uygulayıp her adımda profil almanız önerilir.

Daha fazla kaynak

• Lazy Loading | webpack
• Redux Essentials — Performance & Normalization
• Redux — Performance FAQ
• React resources - MDN