REACT PERFORMANCE
React Bileşenlerinin Re-render’ı üzerine Analizler — 3(useMemo)
React bileşenlerin normal render edilme mantıkları dışında performans elde etmek için bir takım yöntemler kullanılıyor. Bu yazıda useMemo dan bahsedeceğiz.
Şu ana kadar anlattığımız konularda (Performance1 ve Performance2) de amacımız hep component Re-Render engellemek üzerineydi. Özetlersek
- ClassComponent shoudComponentUpdate ile bileşenin gereksiz render edilmesini engelleyebiliyorduk
- PureComponent veya React.memo ile bileşenin gereksiz render edilmesini engelleyebiliyorduk. useCallback ile callback referansların aynı olmasını sağlayıp React.memo etkin çalışmasını sağlıyorduk.
Gördüğünüz gibi yukarda bahsi geçen yaklaşımlar Bileşenin tekrar tekrar çizilmesini engellemeye yönelik.
Peki bizim bir bileşen içerisinde çok zaman alan hesaplama, IO vb bir değer geri dönen fonksiyonları aynı parametreleri alıyor ise tekrar tekrar çalıştırılmasını nasıl engelleyebiliriz ? Cevap → useMemo
useMemo değer döndüren bir fonksiyon aynı parametreler ile çağrıldığında önceden çağrılmış değerlerin aynı olması durumunda tekrar çağrımını engellemeye ve cache tutulan değeri dönmeyi saglar.
Aşağıdaki bileşenin render edilmesini kontrol etmek yerine bazen fonksiyonu kontrol etmek daha anlamlıdır. computeExtensiveValue aşağıda memoize etmediğimizi düşünün, bu fonksiyonun tekrar tekrar çalıştırılması gerekmeyen durumlarda da çalıştırılacak.
Aşağıda kodu çalıştırdığımızda computeExpensiveValue elde eden fonksiyon tekrar tekrar çağrılmış olur.
Bu sefer useMemo ile fonksiyonu memoize edelim, bu sayede oluşturulan value bir yerlerde saklamış oluyoruz.
Ve elde ettiğimiz yöntem ile computExtensiveValue tekrar tekrar çağrılmadığını görebilirsiniz.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki [React Performance] diğer yazılara erişmek için bu linke tıklayabilirsiniz.
