CodeNomadTR
Web geliştirici
React'te uygulama büyüdükçe ilk günlerde fark etmediğiniz yavaşlamalar bir anda kendini göstermeye başlıyor. Özellikle listeler, formlar ve dashboard ekranlarında gereksiz render'lar hem kullanıcıyı hem de sunucuyu yoruyor. Aşağıda benim projelerimde en çok işe yarayan pratik adımları paylaşıyorum.
1. Önce ölçün, sonra optimize edin
React DevTools Profiler ile hangi bileşenin ne kadar sürede render olduğunu görün. "Kulağa mantıklı geliyor" diye memo eklemek çoğu zaman gereksiz karmaşıklık yaratıyor.
2. Gereksiz render'ları kesin
3. Listelerde key ve sanallaştırma
Uzun listelerde index yerine benzersiz bir key kullanın. Binlerce satır varsa react-window veya react-virtualized gibi sanallaştırma çözümleri ciddi fark yaratıyor.
4. Kod bölme (code splitting)
Sayfa bazlı React.lazy ve Suspense ile ilk yükleme boyutunu düşürün. Rota bazlı bölme en kolay kazançlardan biri.
5. Görsel ve bundle optimizasyonu
WebP/AVIF formatları, loading="lazy" ve doğru boyutlandırılmış görseller; ayrıca bundle analizi yapıp gereksiz kütüphaneleri atın. Bir tarih kütüphanesi için 200 KB taşımaya gerek yok.
6. State yönetimini sadeleştirin
Global state'e her şeyi koymayın. Yerel state yeterliyse yerel tutun. Gereksiz context güncellemeleri performansın sessiz katilidir.
Sonuç
Performans optimizasyonu bir kerelik iş değil; ölçüm, deneme ve tekrar döngüsü. Önce profille, sonra en büyük darboğazı çöz. Küçük kazançlar birikince kullanıcıya yansıyan fark ciddi oluyor.
Siz projelerinizde en çok hangi noktada tıkanıyorsunuz? Gereksiz render mı, bundle boyutu mu, yoksa API yanıt süreleri mi? Deneyimlerinizi paylaşın, birlikte bakalım.
1. Önce ölçün, sonra optimize edin
React DevTools Profiler ile hangi bileşenin ne kadar sürede render olduğunu görün. "Kulağa mantıklı geliyor" diye memo eklemek çoğu zaman gereksiz karmaşıklık yaratıyor.
2. Gereksiz render'ları kesin
- Sık değişmeyen bileşenlerde React.memo kullanın, ama önce profilde fayda sağladığından emin olun.
- Fonksiyon ve objeleri her render'da yeniden oluşturuyorsanız useCallback ve useMemo ile sabitleyin.
- Context'i tek büyük objede tutmak yerine parçalara bölün; tüm ağacın yeniden render olmasını engellersiniz.
3. Listelerde key ve sanallaştırma
Uzun listelerde index yerine benzersiz bir key kullanın. Binlerce satır varsa react-window veya react-virtualized gibi sanallaştırma çözümleri ciddi fark yaratıyor.
4. Kod bölme (code splitting)
Sayfa bazlı React.lazy ve Suspense ile ilk yükleme boyutunu düşürün. Rota bazlı bölme en kolay kazançlardan biri.
5. Görsel ve bundle optimizasyonu
WebP/AVIF formatları, loading="lazy" ve doğru boyutlandırılmış görseller; ayrıca bundle analizi yapıp gereksiz kütüphaneleri atın. Bir tarih kütüphanesi için 200 KB taşımaya gerek yok.
6. State yönetimini sadeleştirin
Global state'e her şeyi koymayın. Yerel state yeterliyse yerel tutun. Gereksiz context güncellemeleri performansın sessiz katilidir.
Sonuç
Performans optimizasyonu bir kerelik iş değil; ölçüm, deneme ve tekrar döngüsü. Önce profille, sonra en büyük darboğazı çöz. Küçük kazançlar birikince kullanıcıya yansıyan fark ciddi oluyor.
Siz projelerinizde en çok hangi noktada tıkanıyorsunuz? Gereksiz render mı, bundle boyutu mu, yoksa API yanıt süreleri mi? Deneyimlerinizi paylaşın, birlikte bakalım.