React
useCallback nedir?
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.
Örnek çözümü göster
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;
Kendini test et
-
useCallback neyi önbelleğe alır?
- Değeri
- Fonksiyonu
- State'i
- DOM
Cevabı göster
Fonksiyonu — useCallback fonksiyonu önbelleğe alır.
-
useCallback vs useMemo
useCallback fonksiyon, useMemo ____ önbelleğe alır.
Cevabı göster
useCallback fonksiyon, useMemo değer önbelleğe alır.
-
useCallback adımlarını eşleştir
- fonksiyon
- önbellek
- bağımlılık
- tetikler
- aynı referans
- sabit
- React.memo
- alt bileşen
Sıradaki ders: Kardeş bileşen yeniden çizimi
