REACT PERFORMANCE

React Bileşenlerinin Re-render’ı üzerine Analizler — 2 (useCallback)

Onur Dayıbaşı
Frontend Development With JS
3 min readJan 8, 2022

--

İ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.

useCallback ve useMemo

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,

https://reactjs.org/docs/react-api.html#reactmemo

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.

https://reactjs.org/docs/hooks-reference.html#usecallback

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.

--

--