useCallback nedir?
- React kursu
- Orta seviye
- Ders 25/80
- 4 dk
useCallback ile bir fonksiyonu önbelleğe almayı öğrenirsin.
useCallback nedir?
useCallback, bir fonksiyonu önbelleğe alır; bağımlılıklar değişmedikçe aynı referansı döndürür. const handler = useCallback(() => { ... }, [deps]); biçiminde kullanılır.
useMemo değer için, useCallback fonksiyon için kullanılır. İkisi de aynı önbellek mantığını paylaşır. useCallback aslında useMemo(() => fn, deps)'in kısa yazımıdır.
En sık kullanım: alt bileşene prop olarak geçen fonksiyonları sabit tutmak. Alt bileşen React.memo ile sarılıysa, prop aynı referans olduğu sürece yeniden çizilmez. Bu, büyük listelerde ciddi hız artışı sağlar.
Aynı referansın önemi
JavaScript'te her fonksiyon tanımı yeni bir nesne oluşturur. function App() { const h = () => 0; return <Child onH={h} />; } satırında her render'da yeni bir h fonksiyonu doğar.
Eğer Child React.memo ile sarılıysa, props'un değerce eşit olmasına bakar. Ama fonksiyonlar referans ile karşılaştırıldığı için her render'da farklı görünür ve Child çizilir.
useCallback bu sorunu çözer: aynı bağımlılıklarla fonksiyon referansı korunur. Child.memo ile birlikte kullanıldığında gereksiz çizim önlenir.
Uygulama useCallback iskeleti
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz. useState(0) ile count tanımla. increment'i useCallback(() => setCount(c => c + 1), []) ile tanımla. <button onClick={ '{ increment }' }>Artır</button> ve <p>{ '{ count }' }</p> göster. Dışa aktar.
Başlangıç kodu
import { useState, useCallback } from "react";
// Counter bileşenini buraya yazÖrnek çözüm
import { useState, useCallback } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount((c) => c + 1), []);
return (
<div>
<p>{count}</p>
<button onClick={increment}>Artır</button>
</div>
);
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useCallback neyi önbelleğe alır?
- Değeri
- Fonksiyonu Doğru cevap
- State'i
- DOM
Açıklama: useCallback fonksiyonu önbelleğe alır.
2 useCallback vs useMemo
useCallback fonksiyon, useMemo ____ önbelleğe alır.useCallback fonksiyon, useMemo değer önbelleğe alır.Açıklama: useMemo değer önbelleğe alır.
3 useCallback adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
fonksiyon |
önbellek |
bağımlılık |
tetikler |
aynı referans |
sabit |
React.memo |
alt bileşen |