React useCallback Nedir? React useCallback Kullanımı

React yazı serimize devam ediyoruz. Bu yazımızda React useCallback Nedir? React useCallback Kullanımı’na bakacağız.

React useCallback Nedir?

useCallback, React kütüphanesindeki bir hook’tur ve işlevleri optimize etmek ve performansı artırmak için kullanılır. Bu hook, özellikle componentler içinde kullanılan fonksiyonların gereksiz yeniden oluşturulmasını önlemeye yardımcı olur. Yani aynı işlevi yineleyen renderler arasında aynı referansı koruyarak, gereksiz yeniden render’ları engeller.

React useCallback Neden Kullanılır?

Bir componentten, başka componentlere veya prop’lara geçirilen fonksiyonların her render sırasında yeni referanslar oluşturmasının, performans sorunlarına yol açabileceğini unutmamak önemlidir. Örneğin, bir component içindeki bir alt componente prop olarak geçirilen fonksiyon, her ana component yeniden render edildiğinde yeni bir referansa sahip olur. Bu durumda alt component de gereksiz yere yeniden render edilir.

useCallback kullanmanın ana amacı, bu tür gereksiz yeniden render’ları önlemektir. Fonksiyonlarınızın aynı referansı korumasına yardımcı olarak, alt componentlerin gereksiz yere yeniden render edilmesini engelleyebilirsiniz.

Örnek: useCallback Kullanımı

Aşağıda useCallback‘in nasıl kullanılacağını göstereceğim. Bu örnekte, bir ana component içindeki bir butona tıklama olayı için bir fonksiyon tanımlayacağız ve bu fonksiyonu alt componente prop olarak ileteceğiz.

ParentComponent.js

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent= () => {
const [count, setCount] = useState(0);
// useCallback kullanarak fonksiyonu optimize ediyoruz
const Increase = useCallback(() => {
setCount(count + 1);
}, [count]); // count bağımlılığını belirtiyoruz
const Decrease = useCallback(() => {
setCount(count - 1);
}, [count]); // count bağımlılığını belirtiyoruz
return (
<div>
<p>Count: {count}</p>
<ChildComponent increase={Increase} decrease = {Decrease} />
</div>
);
}
export default ParentComponent;

import React, { useState, useCallback } from 'react';

import ChildComponent from './ChildComponent';

const ParentComponent= () => {

const [count, setCount] = useState(0);

// useCallback kullanarak fonksiyonu optimize ediyoruz

const Increase = useCallback(() => {

setCount(count + 1);

}, [count]); // count bağımlılığını belirtiyoruz

const Decrease = useCallback(() => {

setCount(count - 1);

}, [count]); // count bağımlılığını belirtiyoruz

return (

<div>

<p>Count: {count}</p>

</div>

);

}

export default ParentComponent;

ChildComponent.js

const ChildComponent = ({ increase, decrease}) => {
return (
<div>
<button onClick={increase}>Arttır</button>
<button onClick={decrease}>Azalt</button>
</div>
)
}
export default ChildComponent

const ChildComponent = ({ increase, decrease}) => {

return (

<div>

<button onClick={increase}>Arttır</button>

<button onClick={decrease}>Azalt</button>

</div>

)

}

export default ChildComponent

Yukarıdaki örnekte, Increase ve Decrease fonksiyonlarını useCallback ile optimize ettik. Bu fonksiyonlar, count state’inin değişikliklerine bağımlı olduğu için, bağımlılıkları olarak count dizisini geçtik.

useCallback sadece fonksiyonların yeniden oluşturulmasını engellemeye yardımcı olur, ancak componentlerin yeniden render edilmesini tamamen engellemez. Eğer useCallback ile bir fonksiyonu optimize ederseniz, bu fonksiyonun yeni referanslar oluşturması engellenir. Yani, count değiştiğinde fonksiyonların yeniden oluşturulmasını önledik.

Çıktı:

Umarım “React useCallBack Nedir? ve React useCallBack kullanımı” başlıklı yazım sizin için faydalı olmuştur. useCallBack kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.

Şu yazılar da ilginizi çekebilir.

React useEffect Nedir? React useEffect Kullanımı

Happy coding!

Kaynaklar

react.dev

w3schools.com

React useCallback Nedir? React useCallback Kullanımı