useMemo ve useCallback ne zaman kullanılır: React hayranları için kısa bir kılavuz

Bir React geliştiricisiyseniz, çevrimiçi olarak React useMemo ve useCallback tartışmalarına zaten girmiş ve her zamankinden daha fazla kafanız karışmış olabilir. useMemo ve useCallback arasındaki farkı anlamak çok zor olabilir. Bu iyi! Başta React-Hooks'u anlamak zor olabilir, ancak son derece yararlı olabilirler.

Bu makalede, useCallback ve useMemo arasındaki farkı ve useCallback ve useMemo'nun ne zaman kullanılacağını göstereceğiz.

useMemo ve useCallback Arasındaki Fark

React 16.8 ile iki yerleşik kanca tanıtıldı. Bu özellikler performansı optimize etmek için tanıtıldı. useMemo ile useCallback arasındaki fark önemsiz görünüyor, bu yüzden karışıklığı gidermeye çalışacağız.

Tepki Kancaları nedir?

Kancalar, React'te kullanıma sunulan ve bir sınıf yazmadan useState ve diğer React özelliklerine izin veren yeni özelliklerdir. Kancalar, React'in durum ve yaşam döngüsü özelliklerine "bağlanan" yöntemler ve işlevlerdir.

useCallback vs useMemo

useCallback kancası, bir alt bileşen gerçekten ihtiyaç duymadan tekrar tekrar oluşturulduğunda kullanılır. useCallback kullandığınızda, her seferinde yeni bir örnek oluşturmak yerine, geçirilen işlevin aynı örneğini döndürerek bu gereksiz yeniden oluşturmayı önleyebilirsiniz. Bu, önemli miktarda zamandan (ve geliştirme saatlerinde harcanan paradan) tasarruf sağlayabilir. Not alınmış bir geri arama ile bir dizi bağımlılığın iletilmesi, yalnızca bağımlılık değiştiğinde değiştirilecek olan, not alınmış bir sürümle sonuçlanacaktır.

useMemo, React'in işlevsel bileşeninde kullanılır. Hafızaya alınmış bir değer döndürmek için kullanılır. Notlandırma, bir sonraki çalıştırma için aynı argümanla bir işlevi yeniden derlemek yerine önbelleğe alınmış bir sonuç döndürerek yeniden derleme zamanından tasarruf etme sürecini ifade eder. Önbelleğe alınan sonuç, bir sonraki çağrılışında döndürülür. useMemo kancaları, bellek eşlemeli değerler sağlar.

Açıkçası, bazı benzerlikler var. Hem useMemo hem de useCallback'te kanca, bir dizi bağımlılığın yanı sıra bir işlevi de kabul eder. Ancak useCallback, döndürülen değeri hatırlayacak ve useMemo işlevi hatırlayacaktır. Başka bir deyişle, biri bir değer türünü önbelleğe alırken, diğeri bir işlevi önbelleğe alır.

• DAHA FAZLA OKUYUN – Dosyalarınızı Nasıl ve Neden Düzenli Tutmalısınız
• Elektronik Aletleri Sınıfta Kullanmanın En İyi 9 Yolu

useCallback ve useMemo ne zaman kullanılır?

Öyleyse useCallback'i ne zaman kullanmalısınız ve useMemo ne zaman en iyi seçenektir? Bir örneğe bakalım. Hesaplama açısından ağır ve pahalı bir kod, argümanları kabul ediyor ve bir değer döndürüyorsa, useMemo en iyi seçenektir. Bu şekilde, kodu yeniden çalıştırmadan ve zamanınızı ve hesaplama gücünüzü boşa harcamadan işlemeler arasındaki değeri referans almaya devam edebilirsiniz.

Bir işlev örneğini birden çok işlemede kalıcı tutmanız gerekiyorsa, bunun yerine useCallback'i kullanmalısınız, çünkü bu, işlevi esasen sağlam tutmak için React bileşeninizin kapsamının dışına yerleştirir.

useEffect nedir?

useEffect kullandığınızda karşılaşmış olabileceğiniz bağımlılık dizisinden daha önce bahsetmiştik. useEffect başka bir React kancasıdır. Geri çağırma argümanı mantığını kullanarak fonksiyonel bileşenlerdeki yan etkileri işlemek için kullanılır. Bağımlılıklar, yan etkinin bağımlılıklarının listesidir, örn., aksesuarlar veya durum değerleri.

Bu kanca, React'e, bileşenin oluşturduktan sonra bir eylem gerçekleştirmesi gerektiğini gösterir. DOM güncellendiğinde, geçtiğiniz efekt saklanacaktır. Bu sonucu elde etmek için veri alma işlemini de gerçekleştirebilirsiniz.

Kısacası, useCallback, useMemo ve useEffect, React uygulamalarında bileşenlerin yeniden oluşturulması arasındaki performansın artırılmasıyla ilgilidir.

Yine de kancaları aşırı kullanmamak önemlidir. Kancalar yeni ve karmaşık bir mantık sunar ve potansiyel olarak düşündüğünüzden tam tersi bir etkiye sahip olabilir ve bunları çözmek yerine performans sorunları yaratabilir. useMemo yalnızca gerçekten pahalı hesaplamalar için kullanılmalıdır.

Uygulamanızla ilgili temel sorunları gidermek için useMemo veya useCallback'i kullanmayın. Sonunda, bu sorunlar yeniden ortaya çıkacak ve sizi rahatsız edecek, bu yüzden önce bilinen herhangi bir hataya dikkat edin.

• DAHA FAZLA OKUYUN – En İyi CMS Nasıl Seçilir
• Kriptografik Yöntemlerin Artıları ve Eksileri Nelerdir?

Çözüm

Umarım, bu makale anlayışlı olmuştur ve iki kancayı daha iyi anlarsınız. Özetle:

• Her ikisi de bir işlevi ve bağımlılık dizisini kabul eder
• useMemo döndürülen değeri ezberler, useCallback işlevi ezberler.

useMemo ve useCallback arasındaki fark oldukça açık! Bu araçlar, zaman ve paradan tasarruf etme potansiyeline sahiptir, ancak yalnızca uygun bağlam ve ortamda kullanılırlarsa.

Umarım bu eğitim, useMemo ve useCallback'in Ne Zaman Kullanılacağı hakkında bilgi edinmenize yardımcı olmuştur: React Hayranları İçin Kısa Bir Kılavuz . Söylemek istediğiniz bir şey varsa, yorum bölümlerinden bize bildirin. Bu makaleyi beğendiyseniz, lütfen paylaşın ve daha fazla Teknik ipucu için Facebook, Twitter ve YouTube'da WhatVwant'ı takip edin.

useMemo ve useCallback Ne Zaman Kullanılır – SSS