Bu makalede react içerisinde gerçekleştirdiğimiz her işlem için componentlerin sürekli render edilmesinin önüne geçmek adına çıkarılmış olan memo adlı fonksiyonun işlevini ve nasıl kullanılabileceğini örnek kodlarım ile göreceğiz.
React memo() Nedir? Neden Kullanılır?
Normalde react projesinde bu tür bir girişimde bulunmadığınızda yapacağınız her eylem için sürekli ilgili componentin render edilmesi sağlanır bu durumda performans kaybına neden olmaktadır o yüzden projede illaki sabit olan ve sürekli render edilmesine hiç de gerek olmayan kısımlarınız vardır işte tamda bu kısımlar için geliştirilmiş olan memo() adlı fonksiyon ile bunun önüne geçebilmekteyiz. React 16.6 sürümü ile beraber gelen bu özellik öncesinde shouldComponentUpdate life-cycle metodlarından olan bu metod içerisinden engelleme işlemi yapılırdır fakat artık buna ihtiyaç kalmadı direkt olarak memo adlı fonksiyonu kullanarak tek seferlik render edilecek kısımları belirtebiliyoruz.
Basit bir senaryo üzerinden gidecek olursak default bir react projesi oluşturduğumuzda karşımıza App Component render edilecek şekilde ayarlanmış bir proje karşımıza çıkmaktadır. Altta bu örnek kodu görebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import * as React from "react"; import { render } from "react-dom"; import "./styles.css"; function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } const rootElement = document.getElementById("root"); render(<App />, rootElement); |
Üstte Codesandbox adlı online editörden default olarak oluşturulmuş bir App.tsx dosya içeriğini görüyoruz. Şimdi kurgumuzu bu kodlara uygulayıp böylesine küçük bir projede bile ne gibi tekrar eden render sorunu yaşadığımızı görelim.
Alttaki düzenlediğimiz koda göreceğiniz gibi Footer adında functional component oluşturduk. Bu component geriye “Bu proje murat öner tarafından oluşturulmuştur diye” bir sonuç döndürmektedir ve bu fonksiyon içerisinde console.log ile ekranda bu fonksiyonun tetiklendiğine dair mesaj bastırıyoruz böylelikle kaç defa tetiklendiğini görebilmek için.
Üstteki örnek ekran görüntüsünde göreceğiniz üzere input nesnesine yazdığım her karakter için render işlemi tekrarlanıyor ve functional component içerisindeki console.log aracılığı için tarayıcı konsoluna ilgili mesajı yazdırıyorum buradan anlayacağımız üzere “Buraya ne yazsam bilemedim?” metnini input’a yazdığımda 27 defa render olayının tetiklendiğini görüyoruz. Bu sorunu kendiniz test etmek için alttaki demo kodu test edebilir yada üzerinde oynamalar yapabilirsiniz.
Memo functional component kullanılmamış demo
İşte tam olarak burada bir soru işareti takılıyor kafaya sürekli render edilmesini istemediğimiz kısımları memo ile sarmala işlemi yaparsak sabit içerikli kısımların tekrar tekrar render edilmesinin önüne geçmiş oluruz. Hemen memo yardımcı fonksiyonu ile kod bloğumuzu tekrar düzenleyip demomuza gözatalım.
Memo functional component kullanılmış demo
Üstteki demo’da bahsettiğimiz gibi functional component olarak hazırladığımız Footer adındaki nesneyi React.memo adlı yardımcı fonksiyon ile sarmaladık ve sağ tarafta yer alan input’a giriş yaparsanız conole.log’un başlangıçtaki render sırasında bastırdığı ilk mesaj haricinde bir daha ekstra hiçbir mesaj bastırmadığını göreceksiniz nedeni ise ekstra bir render işlemine gerek olmadığını düşünüp memo fonksiyonu ile sarmaladığımızdan sayfanın ilk yüklenme sırasındaki render işleminden başka render etme girişiminde bulunmuyoruz böylelikle büyük projelerde ekstra re-render maliyetlerini ortadan kaldırmış oluyoruz.
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
