Memoization

1️⃣ Render Mantığı

• Props’ların değişimi, child component’i otomatik olarak re-render etmez. Sadece parent render olduğunda child da render olur.
• Children prop’u olarak element verirsen, memo kullanmaya gerek kalmadan gereksiz render’lar engellenebilir.
• Child bileşenlerde state veya context değişmediği sürece yeniden render olmaz.

2️⃣ Performans Optimizasyonu Yöntemleri

1. Gereksiz Render’ları Engelleme
   • memo: Bir bileşenin prop’ları değişmediği sürece tekrar render olmasını engeller. Büyük ve statik bileşenler için çok faydalı.
   • useMemo: Hesaplaması pahalı olan değerleri önbelleğe almak için kullanılır. Bağımlılıkları değişmediği sürece aynı sonucu döndürür.
   • useCallback: Fonksiyonları önbelleğe alır. Bu sayede alt bileşenler gereksiz yere yeniden render olmaz.
   • Children prop’u geçme: Elementleri veya çocukları prop olarak geçirmek, memo kullanmadan gereksiz render’ı engeller.
2. UI Hızını ve Yanıt Verebilirliği Artırma
   • useTransition: Yavaş geçişlerde UI’nin donmuş gibi görünmesini engeller, daha akıcı bir deneyim sağlar.
3. Bundle Boyutunu Küçültme
   • Gereksiz 3. parti paket kullanımını azalt.
   • Code splitting ve lazy loading: Sayfaları veya komponentleri ihtiyaç anında yükle.

3️⃣ Profiler Kullanımı

• Geliştirici araçlarındaki Profiler, render sebeplerini ve sürelerini gösterir.
• Toplam render sayılarına bakmak, uygulamanın stabilitesini artırmak için önemlidir.

4️⃣ Bir Bileşen Ne Zaman Yeniden Render Olur?

1. State değişimleri (useState)
2. Context değişimleri (useContext)
3. Parent component yeniden render olduğunda