React.memo, useMemo ve useCallback Nedir?
Bu özellikleri açıklamaya başlamadan önce Memoization ne olduğundan bahsetmekte yarar var.
Hesaplanması uzun süren işlevlerimizin sonuçlarını saklayarak aynı girdiler için aynı işlev çağrıldığında: işlevin tekrar çalıştırılmadan saklanılan sonucunun dönülmesine Memoization denir.
Fakat sonuçların saklanması işlemi ucuz değildir. Bu yüzden sadece maliyetli ve aynı girdilerle aynı çıktıları üreten işlevlerde kullanılması önerilir.
Kendi başınıza kuracağınız bir yapı da memoization olabilir. Bu kullandığınız dilin bir özelliği değil programlama da bir tekniğin adıdır.
React.memo
Bileşenimizi sardığımız üst katman bir bileşendir. Bileşenimizin aldığı props ları yüzeysel olarak kontrol ederek, bir değişiklik yoksa son render edilen sonucu kullanır.
props kontrolleri üzerinde yetki sahibi olmak için, React.memo ‘ya ikinci parametre olarak bir işlev veririz. Bu işlev iki parametre alır. İlki mevcut props değerleri, ikincisi ise yeni props değerleridir. Bu işlev true değeri döndüğünde props değişikliği olmadığı için yeniden render işlemi yapılmaz. false döndüğünde bileşenimiz yeniden render edilir.
Resmi react dokümanında bu yöntemin sadece bir performans opitmizasyonu olarak var olduğu ve yeniden render işlemini önlemek için ona güvenmemek gerektiğini söylüyor. Kurgumuzun önleyemediğimiz bir yeniden render işleminden dolayı kırıldığı bir durumun oluşmaması için, bu tavsiyeyi göz önünde tutmanızı öneririm.
useMemo
Memoization da bahsettiğimiz tekniğin React hook’u olarak yapılmasını sağlayan bir işlevdir. İki parametre alır, ilki memoization uygulamak istediğimiz işlemi tutan bir işlevdir. Diğeri o işlemin girdilerini tutan bir deps dizisidir.
Yukarıdaki görsele göre memoizedValue , a ve b girdileri aynı olduğu sürece önceden üretilen değeri döndürecek. Tekrar computeExpensiveValue işlevini çalıştırmayacaktır. Memoization başlığı altında da bahsettiğimiz gibi işlemimiz buna değecek pahalı bir işlem olmalıdır. Basit işlemlerin sonuçlarının saklanma ve kontrol giderleri, işlemlerin kendilerinden daha maliyetli olabilir.
useCallback
useMemo nun aksine aldığı işlevin sonucunu saklamak yerine işlevin kendisini saklar. deps olarak verilen değerleri değişmediği sürece de sakladığı işlevi döndürür.
Bunun faydası şudur. Bileşen içinde tanımladığımız işlevler, o bileşen yeniden render edildiğinde yeniden tanımlanır ve farklı bir referansa sahip olur. Bu yüzden bu işlevler props olarak iletildiğinde aslında işlev değişmemesine rağmen iletildiği bileşenin yeniden render edilmesine neden olurlar.
Çünkü bileşenler işlev olarak aldığı propsların referanslarını karşılaştırarak değişip değişmediğini hesaplar.
Kaynakça:
React Docs — https://reactjs.org/docs/hooks-reference.html#usecallback
Scotch.io — https://scotch.io/tutorials/understanding-memoization-in-javascript
