REACT PERFORMANCE
React Bileşenlerinin Re-render’ı üzerine Analizler — 2 (useCallback)
React bileşenlerin normal render edilme mantıkları dışında performans elde etmek için bir takım yöntemler kullanılıyor. React.Memo, useCallback kullanımlarını analiz edeceğiz.
İlk yazımızda (Analizler-1) Class Componentlar üzerinde state, props değişimi üzerinden kullanabileceğimiz metodlar üzerinde durmuştuk. Bu yazımızda ise React Hooks içerisinde bahsettiğimiz useCallback ve useMemo kullanımı üzerinde duracağız.
Birinci senaryodaki mantığı biraz değiştirelim. Aynı Hook bileşeni React.memo ile memoization yaptık. Ama bu sefer içerisinde bir callback fonksiyonu geçiriyoruz. (Örnek uygulama)
3 farklı tipte callback geçirme işlemi gerçekleştiriyoruz.
- const callback tanımlayıp bunu alt bileşene props olarak geçirme
- inline olarak props callback fonksiyonu bileşene gerirme
- son olarakda useCallback kullanarak fonksiyonu bileşene geçirme..
Parent bileşendeki Counter arttıralım bakalım hangileri render oluyor ?
React.memo kullanmamıza rağmen parent bileşendeki güncelleme alt bileşenleri tetiklemeye başlamış durumda sadece useCallback ile callback cover ettiğimizde child component kendisini render etmedi. Peki neden ?
Nedeni React.memo biz herhangi bir kontrol check islemi vermez isek, aşağıdaki props karşılaştırmasını biz yapmıyor isek,
React bunu shallowly compare ediyor, yani props parametrelerini === ile karşılaştırıyor.
By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.
Peki (===) JS Veri Türlerinde anlattığım Primitive türlerde bu işe yararken diğerlerinde referans üzerinden bir karşılaştırma yapacaktır.
Bu durumda her render sırasında biz bileşene yeni bir callback fonksiyonu geçirdiğimiz için bunların nasıl referanslarını aynı kılabiliriz ?
İşte burada useCallback hook devreye giriyor. Bu callback içerisindeki dependency array içerisindeki [a,b] değişmediği sürece aynı referansı kullanması sağlanıyor.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki [React Performance] diğer yazılara erişmek için bu linke tıklayabilirsiniz.
