React.Js useCallback() Kullanımı

useCallback()

useCallback React'ta bir hook'tur ve genellikle performans optimizasyonu için kullanılır. Bu hook, bir fonksiyonu ve bir bağımlılık dizisi alır. Eğer bağımlılık dizisindeki değerler değişmezse, useCallback aynı fonksiyon referansını döndürür. Eğer bağımlılıklar değişirse, yeni bir fonksiyon oluşturur.

Bu özellik, özellikle React bileşenlerinin yeniden render olmasını önlemek veya kontrol etmek için yararlıdır. Örneğin, bir fonksiyonu bir çocuk bileşene props olarak geçiyorsanız ve bu fonksiyon her render'da yeniden oluşturuluyorsa, çocuk bileşen gereksiz yere yeniden render olabilir. useCallback kullanarak bu tür gereksiz render'ları önleyebilirsiniz.

Kullanımı

useCallback'un temel kullanımı şu şekildedir:

const memoizedCallback = useCallback(
() => {
// yapılacak işlemler
},
[dependency1, dependency2], // bağımlılık dizisi
);

Örnek

import React, { useState, useCallback } from 'react';
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<button onClick={increment}>Increment</button>
</div>
);
}

Bu örnekte, increment fonksiyonu useCallback ile memoize edilmiştir. Bu sayede, count değişmediği sürece increment fonksiyonunun aynı referansı korunur.

Dikkat Edilmesi Gerekenler

• useCallback yalnızca bileşenlerin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır. Bağımlılık dizisini dikkatli bir şekilde belirlemek önemlidir. Eksik veya fazla bağımlılık, beklenmeyen davranışlara yol açabilir.
• useCallback kesinlikle bir performans optimizasyonu aracıdır. Eğer performans problemi yaşanmıyorsa, bu hook'un kullanılması genellikle gereksizdir.
• Bu hook'un en yaygın kullanım alanlarından biri, useEffect veya useMemo gibi diğer hook'larla birlikte kullanmaktır. Örneğin, bir useEffect içinde bir fonksiyonu çağırmak istiyorsanız ve bu fonksiyon her render'da değişmemesi gerekiyorsa, useCallback kullanabilirsiniz.