What is React memo? Why you should use it?

Arkadaşlar merhaba. Bugünkü konumuz React memo — nun ne olduğu ve hangi durumlarda kullanmamız ve kullanmamağımız gerektiği üzere olacaktır.

Bildiyiniz gibi React komponentleri state ve prop -lar deyişdiyi zaman re-render eder. Yani komponentin state durum deyişdiyi zaman ve ya ona pass edilmis prop deyeri deyiştirildiyi zaman yeniden render olunurlar.

Fakat durum şu ki parent komponent re-render olunduğu zaman child komponent de yeniden re-render olunur bu ise bizim her zaman istemediyimiz bir durum bu gibi durumların önüne geçe bilmemiz için React bize memo konseptini sunuyor.

Dilerseniz kisa örneklerle meseleyi açığa kavuşturalım:

Diyelim ki böyle bir komponentimiz var ve button -a her tıkladığımızda state 1 artar ve böylece state deyişdiği için komponent her defasında yeniden render olur. Şimdi durumu biraz daha karmaşık hale getirelim

Arkadaşlar bir List isimli komponent oluşturduk fakat bizim bu List komponentinin App ile hiç bir bağı olmamasına rağmen button-a her tıkladığımızda o da yeniden render olur. (birde list komponentinin listesinin daha büyük olduğunu düşünün ya da mylist array-i ile başka işlemlerinde yapıldığını düşünün her defa re-render olması pekde iyi değil gibi) Durumu biraz düzeltmeye çalışalım şimdi.

Bu kez App komponentinin state durumu değiştiği zaman List komponentinin tekrar render olmasına Memo izin vermeyecektir. Sorunu hall etdik gibi duruyor peki ya mylist List komponentine prop olarak geçilseydi durum nasıl olurdu?

Bir konuyu iyi anlamanızı istiyorum state değiştiyi zaman React komponentleri re-render eder ve bu o demekdir ki komponent dahilindeki tüm değişenler yeniden yaratılır burada durumu düzeltmek için useMemo hook -nu sunuyor. React bize useMemo parametre olarak bir function ve bir dependency array-i aliyor yukardaki örnekde list state-i değişmediği süreçte mylist değişenin deyeri değişmeyecektir bununlada gereksiz re-render durumunu engellemiş olduk.

Peki gelelim en önemli kısıma ne zaman useMemo kullana bilirim ne zaman kullanamam. Arkadaşlar aşağıdaki gibi durumlarda kullanmamanızı tavsiye ederim.

Bu gibi durumlarda useMemo kullanmanızın hiç bir anlamı yoktur string number boolean gibi veri tipleri primitiv veri tipleridir yani burda her zaman bir değer karşılaştırılır. Fakat diyelim ki bir array-niz var ve onun her hangi değerinden bir işlem yapıyorsunuz o zaman useMemo kullanmak iyidir.

Az önceki örnek üzerinden gidersek bu durumda useMemo kullanmak bizi baya performans açısından öne ata bilir yada şöyle bir durumda ola bilirdi.

Bugünlük de benden bu kadar arkadaşlar umarım bir faydası dokunur sizlere Teşekkürler.