Photo by Daniel Eledut on Unsplash

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

https://reactjs.org/docs/hooks-reference.html#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 diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store