React Performans Optimizasyonu: memo, lazy ve bundle analizi

React performansı, her yere memo koymak değildir. Önce problemin nerede olduğunu anlamak, sonra doğru optimizasyonu seçmektir.

Öğrenme Hedefleri

• ▸Gereksiz render problemini tanımak
• ▸memo, useMemo, useCallback ne zaman kullanılır anlamak
• ▸Lazy loading ve code splitting mantığını öğrenmek
• ▸Bundle size kontrolünü performansın parçası görmek

Gereksiz Render Nedir?

Bir parent component değiştiğinde child componentler de yeniden render olabilir. Bu her zaman sorun değildir. Sorun, pahalı hesaplama veya çok büyük liste tekrar tekrar çalışıyorsa başlar.

const filtered = users.filter(user => user.name.includes(search));

Büyük listelerde bu hesaplama her renderda maliyetli olabilir.

Önce Ölç, Sonra Optimize Et

Performans optimizasyonunda ilk kural ölçmektir. Bir component yavaş mı, yoksa sadece kod sana karmaşık mı görünüyor? React DevTools Profiler, tarayıcı Performance paneli ve bundle analiz araçları bu ayrımı yapmana yardım eder.

Kontrol et:

• ▸Hangi component sık render oluyor?
• ▸Render pahalı mı?
• ▸Büyük liste var mı?
• ▸Ağır kütüphane ilk bundle'a mı giriyor?
• ▸Kullanıcı gerçekten gecikme hissediyor mu?

useMemo

const filtered = useMemo(() => {
  return users.filter(user =>
    user.name.toLowerCase().includes(search.toLowerCase())
  );
}, [users, search]);

useMemo, hesaplamayı bağımlılıklar değişmediği sürece tekrar yapmaz.

React.memo

const UserCard = memo(function UserCard({ user }) {
  return <article>{user.name}</article>;
});

Bu, props değişmediyse componentin yeniden render edilmesini azaltabilir. Ama yanlış yerde kullanılırsa kodu karmaşıklaştırır.

Lazy Loading

const AdminPanel = lazy(() => import('./AdminPanel'));

Kullanıcının ilk ekranda görmediği ağır parçaları sonradan yüklemek bundle size açısından faydalıdır.

Büyük Liste Stratejileri

Çok büyük listelerde sadece memo yeterli olmayabilir.

Çözümler:

• ▸Sayfalama
• ▸Cursor pagination
• ▸Virtualization
• ▸Server-side filtreleme
• ▸Debounced search

Frontend arama inputu için JavaScript Debounce ile Arama Inputu, veritabanı tarafı için SQL Cursor Pagination örneklerine bakabilirsin.

Ne Zaman Optimizasyon Yapmamalı?

Küçük componentlerde her yere memo, useMemo ve useCallback eklemek kodu gereksiz karmaşıklaştırır. Eğer ölçümde sorun yoksa basit kod daha değerlidir.

Optimizasyon Sırası

1. ▸Önce ölç.
2. ▸Büyük liste veya ağır hesaplama var mı bak.
3. ▸Gereksiz render gerçekten sorun mu kontrol et.
4. ▸useMemo veya memo uygula.
5. ▸Ağır route/component için lazy loading düşün.
6. ▸Bundle analiz et.

Alıştırma

1000 kullanıcıyı filtreleyen bir liste düşün. Search input her değiştiğinde filtreleme yapılıyor. useMemo eklemeden ve ekledikten sonra render davranışını karşılaştır.

Ek alıştırma: search inputuna debounce ekle ve API isteğinin her tuşta değil, kullanıcı yazmayı bıraktıktan sonra gittiğini doğrula.

Sonraki Adım

Next.js tarafında server/client component ayrımını öğrenmek için React Server Components yazısına geç.