React Performance Optimization: Kullanılan Teknikler

01React'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

02Gereksiz 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

03React.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.

04useMemo 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

05Code 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

06Bü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

07State 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.

08Bundle 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

09React 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

10Gerç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

11Checklist

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

12Sonuç

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