Bileşenlerin gereksiz yere yeniden oluşturulmasını önlemek için useCallback() kullanarak geri arama işlevlerini not etmemiz gerektiğini çok sık duymuş olmalısınız .

Ama useCallback() tam olarak nedir 🤔 . Hiç düşündün mü?

Ne olduğunu ve nerede doğru kullanılacağını anlamanıza yardımcı olayım.

Önce fonksiyon eşitlik kontrollerini anlayalım

Nasıl kullandığımızı görmeden önce, neyi çözdüğünü görelim. Bir fonksiyon döndüren basit bir fonksiyon yazalım:

mul1 ve mul2 iki sayıyı çarpan fonksiyonlardır. Çarpma işlevi tarafından yaratılmışlardır .

JavaScript'teki işlevler normal nesnedir. mul1 ve mul2 işlevleri aynı kodu paylaşır ancak bunlar farklı işlev nesneleridir. Bunları karşılaştırmak false olarak değerlendirir .

JavaScript nesneleri bu şekilde çalışır. Bir nesne (bir işlev nesnesi dahil) yalnızca kendisine eşittir.

Şimdi useCallback() işlevinin amacı

React.useCallback() temelde yukarıda gördüğümüz fonksiyon eşitlik kontrolünü çözer. Aynı kodu paylaşan farklı fonksiyon nesneleri genellikle React bileşenlerinde oluşturulur:

handleClick (satır içi işlev), CustomComponent öğesinin her oluşturma işleminde farklı bir işlev nesnesidir .

Ve React Components ile satır içi olarak bildirilen işlevlere sahip olmanın hiçbir zararı yoktur. Performans üzerinde zararlı bir etkisi olmayacaktır.

Ancak bazı durumlarda, işlemeler arasında tek bir işlev örneğini korumanız gerekir:

1. İşlevin bazı dahili durumları olduğunda olduğu gibi, örneğin işlev geri döndüğünde/kısıldığında

2. İçine sarılmış bir işlevsel bileşen React.memo(), bir işlev nesnesi desteğini kabul eder.

Bir geri aramayı kabul eden bir alt bileşen, özellikleri değiştiğinde gereksiz yeniden oluşturmaları önlemek için bir referans eşitlik kontrolüne (örneğin: React.memo() veya mustComponentUpdate() ) güveniyorsa , herhangi bir geri arama prop'unun aşağıdakiler arasında değişmemesi önemlidir. işler.

Bu nedenle, ana bileşende, geri arama desteğini useCallback() içine sarabilir ve aynı işlev nesnesini optimize edilmiş alt bileşene geçirdiğini garanti edebiliriz.

3. İşlev nesnesi diğer kancalara bağımlılık olduğunda, örn. useEffect(..., [callback])

Yukarıdaki örnekte, myFunction , MyComponent'in yeniden oluşturulmasına neden olan bir şey yaparsa (örn.

Bunu önlemek için useCallback() işlevini bir işlevin etrafına sararız ve işlevin yalnızca bağımlılıkları değiştiğinde yeniden oluşturulmasını sağlamak için bağımlılıklarını tanımlarız. Bu nedenle, işlev artık her oluşturma döngüsünde yeniden bildirilmez

Bu nedenle, yukarıdaki kullanım durumları, useCallback kancasının yararlı olduğu durumlardır : aynı bağımlılık değerleri verildiğinde, kanca , işlemeler arasında aynı işlev örneğini döndürür ve performansı artırır.

Umarım useCallback()' in gerçekte ne olduğunu anlamanıza yardımcı olmuştur ! 😊

Bu makaleyi okuduğunuz için teşekkür ederiz. Beğendiyseniz, başkalarının bulmasına yardımcı olmak için lütfen 👏 düğmesine tıklamaktan çekinmeyin.