- React
React Performance Optimization: Kullanılan Teknikler
React uygulamalarında performans yalnızca React.memo kullanmaktan ibaret değildir. Gerçek optimizasyon; doğru render yönetimi, state mimarisi ve bundle optimizasyonu ile başlar.
Zeynep Baş2 dk okuma
React'te Performans Neden Önemlidir?
Hızlı çalışan uygulamalar daha iyi kullanıcı deneyimi sunar.
Performans yalnızca uygulamanın hızlı açılması değildir. Gereksiz render işlemlerini azaltmak, JavaScript yükünü düşürmek ve kullanıcı etkileşimlerini daha akıcı hale getirmek modern React uygulamalarının temel hedefidir.
Daha hızlı sayfa yüklenmesi
Düşük bellek kullanımı
Akıcı kullanıcı deneyimi
Daha yüksek Lighthouse skoru
Gereksiz Re-render'ları Azaltın
React performans problemlerinin büyük kısmı gereksiz render'lardan kaynaklanır.
Bir parent component render olduğunda child component'ler de yeniden render edilir. Her render gerekli olmayabilir.
React.memo kullanımı
Stable props oluşturmak
Stable function referansları
Component parçalama
React.memo
Her component için değil, gerçekten ihtiyaç duyulan yerlerde kullanılmalıdır.
React.memo aynı prop'larla tekrar render edilmesini engeller.
Liste elemanları
Kart bileşenleri
Tablolar
Sık render olan bileşenler
Yanlış kullanımı performansı artırmak yerine düşürebilir.
useMemo ve useCallback
Memoization doğru kullanıldığında ciddi performans kazancı sağlar.
Ağır hesaplamalar ve referans değişikliklerini kontrol etmek için kullanılmalıdır.
Filtreleme
Sıralama
Büyük veri hesaplamaları
Callback referanslarını koruma
Code Splitting ve Lazy Loading
İlk yüklenen JavaScript boyutunu küçültün.
Kullanıcının ihtiyaç duymadığı kodları ilk yüklemede göndermemek uygulamayı ciddi şekilde hızlandırır.
React.lazy
Suspense
Dynamic Import
Route Based Splitting
Büyük Listeleri Optimize Edin
Binlerce satırı aynı anda render etmeyin.
Virtualization sayesinde yalnızca ekranda görünen öğeler render edilir.
react-window
react-virtualized
Infinite Scroll
Pagination
State Yönetimini Doğru Planlayın
Her veriyi global state'e koymak performansı olumsuz etkileyebilir.
State yalnızca ihtiyaç duyulan yerde tutulmalıdır.
Local State
Context API
Redux Toolkit
Zustand
TanStack Query
Server State ile UI State birbirinden ayrılmalıdır.
Bundle Boyutunu Küçültün
Daha küçük bundle daha hızlı yükleme demektir.
Kullanılmayan kodları ve büyük bağımlılıkları projeden kaldırmak performansı artırır.
Tree Shaking
Bundle Analyzer
Dynamic Import
Dead Code Elimination
React Profiler ile Ölçüm Yapın
Ölçmediğiniz performansı optimize edemezsiniz.
React Developer Tools içindeki Profiler hangi component'in neden render olduğunu gösterir.
Commit süreleri
Render sayıları
Flame Graph
Slow Components
Gerçek Projelerde Yapılan Performans Hataları
Çoğu performans problemi yanlış geliştirme alışkanlıklarından kaynaklanır.
Ekiplerin kod review sırasında dikkat ettiği yaygın hatalar:
Her yerde React.memo kullanmak
Yanlış key kullanımı
Devasa component oluşturmak
Context'i gereksiz büyütmek
API isteklerini tekrar tekrar yapmak
Gereksiz state oluşturmak
Checklist
Performans optimizasyonu bir araç değil, geliştirme kültürüdür.
Performans odaklı geliştirme yapan ekipler aşağıdaki adımları standart hale getirir.
React Profiler kullan
Lazy Loading uygula
Bundle boyutunu analiz et
Virtualization kullan
Memoization'ı doğru yerde uygula
Lighthouse skorlarını takip et
Core Web Vitals metriklerini izle
Sonuç
Performans optimizasyonu kullanıcı deneyiminin temelidir.
React uygulamalarında performans yalnızca birkaç hook kullanarak elde edilmez. Doğru mimari, render yönetimi, state planlaması ve sürekli ölçüm sayesinde ölçeklenebilir ve hızlı uygulamalar geliştirilebilir.
React.memo
useMemo
useCallback
Lazy Loading
Virtualization
Bundle Optimization
React Profiler