React Memo ve useMemo nedir? Hangi durumlarda kullanılır?

Bugün react hookslarından useMemo ve React.memo‘yu inceleyeceğiz, örnekler yapacağız, nerede kullanılması gerektiğini bakıp hangi ihtiyaçlar için kullanılabileceğini tespit edeceğiz.

Öncelikle memoize kavramının anlamına bakalım.

Memoization, bir fonksiyon hesaplama yaparken daha önce yaptığı işlemi tutması ve böylece de her seferinde fonksiyonu çalıştırmayan bir yöntemdir. Örneğin faktöriyel hesaplayan bir fonksiyonumuz var, 12’nin her seferinde faktöriyelini alınması yerine bir kez alıp memoize edilirse tekrar çağrılma durumunda da fonksiyon çalışmaz ve otomatik bellekten çekilir.

Tanımı yaptıktan sonra Reactta bu yöntem nasıl kullanılıyor onu inceleyelim.

React.Memo

Örneğin bir header component ve altında da bir sayı artıran bir butonunuz olsun, butona her tıkladığımızda header tekrar render olacaktır. Aşağıdaki kodu inceleyelim

App.js

Header.js

her butona tıkladığımızda header render olacaktır

İşte bunun önüne geçebilmek için header componentini memoize etmemiz lazım, aşağıdaki gibi memoize edersek tekrar render olmayacaktır.

Kaynak kod: sandbox

Ne Zaman Kullanmalıyız?
Üstteki örnek nasıl kullanmamıza dair bir örnekti, bu tarz bir yaklaşımda ihtiyacımız yok tam tersi gereksiz bir performans kaybı olur propsların yoğun olduğu, fazla render olunan yerlerde kullanılması daha amacına uygun olur

useMemo Nedir?

useMemo hooksu dependecy liste bağlı olarak çalışır, listeden bir değer değiştiğinde fonksiyon çalışır ve cache’a atılır/memoize edilir.

Hangi Durumlarda Kullanılmalı?

usememo hooksu expensive fonksiyonlarımızı gereksiz yere render olmasını engeller, tamamen performans optimize etmek için kullanılan bir hook. basit, fazla işlem olmayan fonksiyonlarda kullanılmamalı ve amacınız tekrar render olmasın olmamalı react bunun garantisini vermiyor sadece performans üzerine kurgulanmalı.

Nasıl Çalışır

Örnek Proje
Statik bir kullanıcı listemiz olacak ve dropdown ile seçilen kullancının yaşını hesaplayacağız ayrıca bir de buton sayacımız olacak

App.js:

Dropdowndan bir kullanıcı seçtiğimiz zaman app.js render olacak ve kullancının yaşı hesaplanacak, fakat sayaç butonumuzu tıkladığımızda da yeniden render sonucu seçili kullanıcının yaşı yeniden hesaplanacak ve aşağıdaki gibi bir sonuç elde edeceğiz

Şimdi fonksiyon değerimizi memoize edelim.

Sonuç
Görüldüğü gibi useMemo ile tekrar render sonucu gereksiz hesaplamalardan kaçınmış olduk, ama re-renderingi önlemek her zaman iyi bir şey değil, performansı geliştirirken bunu bedavaya yapmıyor kendisinin de bir maliyeti var, mesela memoize olan fonksiyon ilk çalıştığında bunu bellekde depolar, bu işlem büyükse mesela 5000 kayıt dönen bir fonksiyonsa ilk render maliyetli olacaktır, o yüzden projenizi ilk kez yaparken kullanmayın daha sonra maliyetli fonksiyonlarınızı optimize edebilirsiniz.

Kod: Sandbox

Başka bir yazıda görüşmek üzere 🙂

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Turkish