React.memo mi useCallback mı useMemo mi? Performans Optimizasyonu
React uygulamalarında performans sorunları genellikle gereksiz render işlemlerinden kaynaklanır. Bir bileşen güncellendiğinde, tüm alt bileşenleri de yeniden render edilir. Bu zincir reaksiyonu, özellikle büyük uygulamalarda ciddi performans düşüşüne yol açabilir. React.memo, useCallback ve useMemo bu sorunu çözmek için tasarlanmış üç farklı araçtır. Ancak her birinin farklı kullanım senaryoları vardır ve yanlış yer de uygulanırsa gereksiz karmaşıklığa neden olabilirler. Bu rehberde, her tekniğin ne zaman ve nasıl kullanılması gerektiğini detaylı olarak inceleyeceğiz.
React.memo: Bileşen Seviyesinde Optimizasyon
React.memo, bir bileşenin aldığı props değişmediğinde yeniden render edilmesini engelleyen Higher Order Component (HOC) bir araçtır. Bu teknik, özellikle saf (pure) bileşenler için oldukça etkilidir.
Ne zaman kullanılır: Bir bileşen, aynı props'lar ile çağrıldığında aynı çıktıyı üretiyorsa React.memo uygun bir seçimdir. Örneğin, ürün kartı bileşenleri, başlık bileşenleri veya liste öğeleri gibi statik içerik sunan bileşenler React.memo'dan faydalanamaktadır.
Maliyeti ve faydası: React.memo, props karşılaştırması için ek bir maliyete neden olur. Bu karşılaştırma genellikle hızlıdır, ancak çok karmaşık nesne karşılaştırmaları yapılırsa faydası azalabilir. Sığ (shallow) karşılaştırma yöntemi kullanıldığından, iç içe nesneler ve diziler değişse bile React.memo bunu fark etmeyebilir.
- Sayfa başında 50+ liste öğesi render ediliyorsa React.memo belirgin fark yaratır
- Modal, dropdown gibi küçük bileşenler için genellikle gerekli değildir
- Primitive props (string, number, boolean) kullanıldığında en etkilidir
useCallback: Fonksiyon Referansını Sabitlemek
useCallback hook'u, bir fonksiyonun referansını belirli bağımlılıklar değişene kadar sabit tutar. React.memo ve birlikte kullanıldığında çok güçlü olabilir çünkü prop olarak geçilen fonksiyonlar, her render'da yeni bir referans alır ve bu da React.memo'u işe yaramaz hale getiri.
Pratik örnek: Bir üst bileşen, alt bileşene onClick handler geçiriyorsa ve bu handler useCallback ile sarılmamışsa, alt bileşen her seferinde yeniden render edilir. Çünkü JavaScript'te her defasında yeni bir fonksiyon nesnesi oluşturulur.
- Event handler'ları (onClick, onChange) sarmanız önerilir
- useEffect bağımlılık dizisine fonksiyon geçerken useCallback zorunludur
- Callback fonksiyonu, dikkat edilmesi gereken bağımlılıklar içeriyorsa daha risklidir
useMemo: Hesaplamaları ve Nesneleri Önbelleğe Almak
useMemo, pahalı hesaplamaların sonucunu veya karmaşık nesnelerin referansını sabitlemek için kullanılır. Yalnızca bağımlılıklar değiştiğinde yeni değer hesaplanır.
Kullanım senaryoları: Bir dizi için sıralama ve filtreleme yapılıyorsa, bu işlem useMemo içinde yapılmalıdır. Aksi takdirde, her render'da yeniden hesaplanır. Benzer şekilde, stil nesneleri veya karmaşık konfigürasyon objeleri useMemo ile korunmalıdır.
| Seçenek | Amaç | Maliyeti | En İyi Durum |
|---|---|---|---|
| React.memo | Bileşen render'ını atla | Props karşılaştırma | Saf bileşenler, sık render edilen listeler |
| useCallback | Fonksiyon referansını sabitle | Fonksiyon oluşturma + hafızada tutma | React.memo bileşenlere geçilen handler'lar |
| useMemo | Hesaplamayı önbelleğe al | Sonuç hafızasında tutma | Pahalı hesaplamalar, dinamik nesneler |
Doğru Kombinasyon ve Karar Kriterleri
Bu üç tekniği birleştirirken dikkat etmek gereken en önemli kural, "premature optimizasyon" tuzağına düşmemektir. Eğer performans problemi henüz yoksa, bu araçları kullanmak kodunuzu gereksiz yere karmaşıklaştırır.
Adım adım yaklaşım: Önce performans profili alın. React DevTools Profiler kullanarak hangi bileşenlerin sık render edildiğini belirleyin. Gereksiz render'lar tespit edildikten sonra, React.memo ile başlayın. Eğer props olarak geçilen fonksiyonlar sorun oluşturuyorsa, useCallback ekleyin. Pahalı hesaplamalar varsa, useMemo kullanın.
- Her bir optimizasyondan sonra performans ölçümünü tekrarlayın
- Kompleks prop'lar (nesneler, diziler) için özel karşılaştırma fonksiyonu yazabilirsiniz
- Yapısal olarak bileşenleri yeniden dizayn etmek, bu araçlardan daha etkili olabilir
React.memo, useCallback ve useMemo, performans optimizasyonunun temel araçlarıdır, ancak gümrük görevli değildir. Her biri belirli sorunlara özgü çözümlerdir. Doğru problem teşhisi yapıldığında, doğru aracı seçmek çok daha basit hale gelir. Çoğu zaman tek bir teknik yeterli olabilir; bazı durumlarda kombinasyon gerekebilir. Önemli olan, uygulamanızın gerçek performans ihtiyaçlarını anlamak ve buna uygun olarak karar vermektir.