React.memo() kullanımı ve faydası

React’in 16.6. sürümüyle birlikte gelen “memo” metodu, projelere mantıksal müdahalelerde bulunup, daha performans odaklı bir kod yazımını mümkün kılıyor.

“memo”, daha önce “shouldComponentUpdate” metodu ile yapabildiğimiz sürekli render işlemini engellemeyi daha kolay bir hale çevirmiş durumda. İstenmeyen “re-rendered” işlemlerin önüne geçmek için derlenmiş bir paket.

Basit bir yapı düşünelim. Bir “App” class’i ve ona dahil edeceğimiz “Other” adında “functional component”imiz olsun.

Burada “Other” component’i içerisinde return etmeden önce çalışıtrdığımız bir “console.log” mevcut. Burada çok daha detaylı işlemler yapıldığını düşünebilirsiniz.

Şimdi “App class”ini yazalım.

“firstname” ve “value” olmak üzere iki state mevcut. Burada yaptığımız input’a her veri girdiğimizde bunun “value” “state”ine kaydedilmesi ve “button”a bastığımızda return ettiğimiz “firstName” “state”i üzerinden içeriği güncellemek. Buraya kadar temel bir React bilgisi söz konusu.

Ancak, “App class”ina dahil ettiğimiz “Other component”i, input ya da buton her değiştiğinde kendi içinde render ettiği “console.log(‘Merhabalar’)” parçacığını sürekli olarak çalıştıracak.

Bunu engellemek için React’in eski sürümünde “shouldComponentUpdate” metodunu kullanmak gerekirdi. Şimdi “memo” ile de bu sorunun üstesinden gelebiliyoruz.

Yapmamız gereken “Other component”ini React.memo() metodu ile sarmak.

Böylelikle artık istenmeyen “re-rendered” durumlarını engellemiş oluyoruz.

https://codesandbox.io/s/8v4v922vl