React useCallBack()'e Giriş

React kullanarak bir web sitesi oluştururken, ne kadar hızlı yüklendiğini ve kullanıcıların onunla ne kadar hızlı etkileşime girebileceğini dikkate almak önemlidir. Bir React web sitesini daha hızlı hale getirmenin bir yolu, sayfanın değişmemiş kısımlarını yeniden işlemek gibi gereksiz işler yapmasını engellemektir.

React'teki useCallback() işlevi, tanımladığımız işlevleri hatırlayarak ve bunları yalnızca gerektiğinde yeniden oluşturarak bunu başarmamıza yardımcı olur.Bu, web sitesini kullanıcılar için daha hızlı ve daha duyarlı hale getirebilir. Aynı yıl yapılan bir Stack Overflow anketine göre React, en popüler ön uç JavaScript kitaplığıdır ve bu, useCallback() öğesinin sektörde büyük olasılıkla yaygın olarak kullanıldığını düşündürmektedir.

Bu yazıda, React'te useCallBack()'in ne olduğunu ve performansı artırmak için React kodumuzda nasıl kullanılacağını açıklayacağız .

React'te useCallBack nedir?

useCallback(), React tarafından sağlanan ve bir işlevi hafızaya almak için kullanılan bir kanca işlevidir. Başka bir deyişle, istenmeyen yeniden oluşturmayı önleyerek bir bileşenin performansını optimize etmeye yardımcı olur.

React'te, bir bileşenin durumu veya özelliği değiştiğinde, bileşen, güncellenen değerleri yansıtacak şekilde yeniden işlenir. Bu işlem, hesaplama açısından pahalıdır ve yanlış işlenirse uygulamanın performansını düşürebilir. UseCallback()'in kullanışlı olduğu yer burasıdır.

useCallback() ile, kullanıcılar bir fonksiyonu hafızaya alabilirler, yani sadece bağımlılıkları değiştiğinde yeniden tanımlanır. Bu, gereksiz bileşen yeniden oluşturmayı önleyerek uygulamanın performansını optimize eder.

İşte bir örnek -

const memoizedCallback = useCallback(

() => {

birşey yap(a, b);

},

[a, b],

);

Öğreticiler aracılığıyla React'e başlamak harika bir yol olsa da, geliştirmeye başlamak için dinamik bir kurs izlemek, becerilerinizi güncellemenize önemli ölçüde yardımcı olabilir. Yazılım Geliştirmede Yönetici Yüksek Lisans Programına göz atın - upGrad'dan kickstart'a Tam Yığın Geliştirmede Uzmanlık kursu!

useCallBack() kullanmanın avantajları

İşte React useCallBack() kullanmanın bazı avantajları –

• useCallback(), bileşenlerin gereksiz güncellemelerini önleyerek React uygulamalarının daha hızlı çalışmasına yardımcı olabilir.
• Bir bileşen çok fazla veri alır ve bunu bir grafik olarak gösterirse, useCallback() işlevinden yararlanabilir.
• Grafiğin ana bileşeni güncellenirse ancak değişiklikler grafiği etkilemezse, grafiği güncellemeye ve verileri tekrar getirmeye gerek yoktur.
• Verileri getiren işlevi hafızaya almak için useCallback()'i kullanarak, gereksiz güncellemelerden kaçınabilir ve uygulamayı daha hızlı ve sorunsuz hale getirebiliriz.
• Bu optimizasyon, uygulama daha hızlı ve verimli çalışacağından kullanıcı deneyimini iyileştirebilir.

Kendinizi geliştirmek içinupGrad'ınYazılım Geliştirme Kurslarınagöz atın.

useCallBack() Sözdizimi ve Parametreleri

const memoizedCallback = useCallback(

() => {

bir şey yap();

},

[bağımlılık1, bağımlılık2]

);

Örnekte, useCallback() kancası, doSomething()işlevini ezberler, yani önceden oluşturulmuş sürümü önbelleğe alır.Bağımlılık1 veya bağımlılık2'nindeğeri değişmedikçe, önbelleğe alınan işlev yalnızca sonraki işlemelerde kullanılacaktır .

Bu bağımlılıklardan herhangi biri değişirse,doSomething() işlevinin yeni bir sürümü oluşturulur ve önbelleğe alınan sürüm yenisiyle değiştirilir.Bu, gereksiz işlev oluşturmaları ve yeniden oluşturmaları önleyerek uygulamanın performansını optimize etmeye yardımcı olur.

useMemo() ve useCallBack() arasındaki fark

useCallback ve useMemo, değerleri ezberleyerek bir React uygulamasının performansını iyileştirebilen React Hook'lardır. Her iki kanca da bir işlevi bağımsız değişken olarak alır ve bu işlevin hafızaya alınmış bir sürümünü döndürür.

İşte ikisi arasındaki fark:

useCallBack() işlevinin ne zaman kullanılacağına ilişkin senaryolar

İşte useCallBack()'in kullanılabileceği senaryolar:

Alt Bileşenler Optimizasyonu

useCallback React, özellikle bu alt bileşenlere geri aramalar iletirken gereksiz işlemelerden kaçınmak için referans eşitliğine dayanan alt bileşenleri optimize eder.

Gereksiz İşlemeleri Önleme

React useCallback , özellikle ona ihtiyaç duymadan tekrar tekrar işlenen bir alt öğeye sahip bir bileşeniniz olduğunda kullanışlıdır. Gereksiz işlemeleri önlemek için useCallback'e bir geri çağırma işlevi ve bir bağımlılık dizisi geçirebilirsiniz .

upGrad'dan Full Stack Software Development Bootcamp kursunun yardımıyla useCallBack() işlevini ayrıntılı olarak anlama şansınızı kullanın .

Popüler Yazılım Mühendisliği Kurslarımızı keşfedin

useCallBack() örnekleri

Burada useCallBack() kancasının nasıl uygulanacağına dair bazı örnekler verilmiştir.

useCallBack Örnek 1

Bir üst bileşen, bir işlevi bir alt bileşene destek olarak aktardığında, üst öğenin sık sık yeniden oluşturulması, alt bileşenin gereksiz yere yeniden oluşturulmasına neden olabilir. Bu gibi durumlarda, bu gereksiz yeniden oluşturmaları önlemeye yardımcı olabilecek işlevi hafızaya almak için useCallback'i kullanmak.

React'i içe aktarın, { useCallback } 'tepki'den;

işlev Ana Bileşen () {

const handleButtonClick = useCallback(() => {

console.log('Buton tıklandı');

}, []);

geri dönmek (

<ChildComponent onClick={handleButtonClick} />

);

}

function ChildComponent({ onClick }) {

geri dönmek (

<button onClick={onClick}>Beni tıkla</button>

);

}

useCallBack Örnek 2

Büyük bir veri kümesi üzerinde karmaşık hesaplamalar yapan bir işleve sahip olduğunuzu varsayalım. Bu işlev sık sık çağrılırsa ve yürütülmesi uzun sürerse, uygulamanızda performans sorunlarına neden olabilir. Bu senaryoda, işlevi not almak ve hesaplamanın gereksiz yere yeniden yürütülmesini önlemek için useCallback'i kullanabilirsiniz.

'tepki'den React, { useState, useCallback } içe aktarın;

işlev Ana Bileşen () {

const [veri, setData] = useState([]);

const processData = useCallback(() => {

const işlenmişVeri = "İşlenmiş veri";

işlenmiş Verileri döndür;

}, [veri]);

geri dönmek (

<ChildComponent processData={processData} />

);

}

function ChildComponent({ processData }) {

const sonuç = processData();

geri dönmek (

<div>{sonuç</div>

);

}

UseCallBack() kullanarak React Performance Optimization

Bir useCallback kancası, yalnızca bağımlılıklarından biri değiştiğinde yeniden yapılmasını sağlayarak, bir işlevi ezberlemenize izin veren, React'te güçlü bir araçtır. Bu, özellikle sık çağrılan performans yoğun işlevler için faydalıdır. Nasıl kullanılabileceğini görmek için aşağıdaki örneğe göz atın –

'tepki'den { useState, useEffect } içe aktarın;

işlev Uygulaması () {

const [kelime, setWord] = useState(“Bob”);

const say = () => console.log(`Sözünüz: ${word}`);

useEffect(() => {

söylemek();

}, [söylemek]);

dönüş <div>Hoş geldiniz!</div>;

}

Örnek, useEffect kancasının say işlevine bağımlı olduğunu gösterir; bu, yalnızca işlev değişikliği ile tetiklenmesi gerektiği anlamına gelir. Yine de, React'in referans eşitlik kontrolleri nedeniyle, say işlevi, gerçek bir değişiklik olmadığı durumda bile her zaman doğru olarak değerlendirilecek ve gereksiz işlemelere neden olacaktır.

Performans için uygun olmayan her işlemede useEffect geri araması kullanılacaktır. Bunu çözmenin bir yolu, işlevi useEffect bloğuna yeniden yerleştirmektir, ancak işlevi başka bir yerde kullanamayacağınız için bu ideal bir çözüm olmaz. Aşağıdaki bu örneği inceleyin –

React'i içe aktarın, { useState, useEffect } 'react'ten;

işlev Uygulaması () {

const [kelime, setWord] = useState(“Bob”);

const say = () => console.log(`Sözünüz: ${word}`);

useEffect(() => {

söylemek();

}, [söylemek]);

dönüş <div>Hoş geldiniz!</div>;

}

Başka bir çözüm, işlevi sararak useCallback kancasını uygulamaktır . useCallback işlevinin, tıpkı useEffect gibi bir bağımlılık dizisi gerektirdiğini unutmamak önemlidir. İşlev herhangi bir değişken alırsa, kullanıcılar onu diziyle iletebilir; yoksa boş bırakın. Burada say fonksiyonu word değişkenine bağlı olduğu için onu diziye dahil ediyoruz.

{useState, useEffect,useCallback} 'react' öğesinden içe aktarın

işlev Uygulaması () {

const [word,setWord]=useState(“Bob”)

const say = useCallback(()=>console.log(`Sözünüz: ${word}`),[word])

useEffect(()=>{

söylemek()

},[söylemek])

<div>Hoş geldiniz!</div>

}

useCallBack() ne zaman kullanılmaz?

useCallback(), belirli senaryolarda performansı optimize etmek için yararlı bir araç olsa da, gereksiz ve hatta zararlı olduğu zamanlar da vardır. Burada useCallback()'in ne zaman kullanılmayacağına dair bazı örnekler verilmiştir:

• İşlev bir prop olarak iletildiğinde, zaten harici bir duruma dayanmayan saf bir işlevdir.
• İşlev bir prop olarak geçirildiğinde, herhangi bir performans sorununa neden olmuyor ve aşırı çağrılmıyor.
• İşlev bir prop olarak iletildiğinde, birden çok yerde kullanılır ve farklı davranışları veya bağımlılıkları yansıtmak için her seferinde yeniden oluşturulması gerekir.
• İşlev, küçük bir bileşen ağacının parçası olan bir destek olarak iletildiğinde, useCallback() işlevinden elde edilen performans kazancı ihmal edilebilir düzeyde olacaktır.
• İşlev prop olarak iletildiğinde olay işleyici olarak kullanılır ve yalnızca bir kez çağrılır.

Bu durumlarda, useCallback() işlevinin kullanılması, belleğe alınan geri aramayı oluşturma ve sürdürme ek yükü nedeniyle performansı düşürebilir. UseCallback() işlevinin kullanılıp kullanılmayacağına karar vermeden önce her bir kullanım durumunu dikkatlice değerlendirmek ve potansiyel faydaları potansiyel maliyetlere karşı tartmak önemlidir.

İsteğe Bağlı Yazılım Geliştirme Becerileri

Çözüm

useCallback'i kullanmak, React uygulamanızın performansını optimize etmek için güçlü bir araç olabilir. İşlevleri ezberleyerek, gereksiz yeniden işlemelerden kaçınılabilir, bu da daha sorunsuz ve daha verimli bir kullanıcı deneyimine yol açar. Ancak, useCallback'i mantıklı bir şekilde kullanmak ve en etkili olduğu zaman senaryoları anlamak önemlidir.

upGrad, endüstri ile ilgili becerilere odaklanan kapsamlı bir bilgisayar bilimi eğitimi sağlayan Bilgisayar Bilimleri Yüksek Lisans programı sunar. Bu program, yazılım geliştirme becerilerini geliştirmek için daha yeni veya daha deneyimli kişiler içindir. Bu kurs ile öğrenciler, kariyerlerini gerçek dünyada yükseltmeye ve arzu ettikleri alanlarda uzman olmaya fazlasıyla hazır olacaklar.