useCallback
- React Native kursu
- Orta seviye
- Ders 89/116
- 5 dk
useCallback ile callback memoization öğrenirsin.
useCallback nedir?
useCallback, bir fonksiyonu saklayan (memouze eden) hook'tur. Bileşen her render olduğunda yeni bir fonksiyon oluşmaz; aynı referans korunur. const handleClick = useCallback(() => { ... }, [deps]) şeklinde çağrılır.
Stabil referansın önemi, alt bileşenin memo'lu olduğunda ortaya çıkar. Eğer her render'de yeni bir fonksiyon gönderirsen, alt bileşen props değişti sanar ve gereksiz render olur. useCallback ile aynı referansı gönderirsen alt bileşen atlar. deps dizisi ne zaman yeniden hesaplanacağını belirler; boş dizi mount'ta bir kez hesaplar.
Stabil referans
useCallback'in ikinci parametresi bağımlılık dizisidir. Bu dizi, fonksiyonun ne zaman yeniden oluşturulacağını söyler. Boş dizi [] verirsen fonksiyon mount'ta bir kez oluşturulur ve hep aynı kalır.
Bağımlılık olarak bir değişken verirsen, o değişken değiştiğinde fonksiyon yeniden oluşur. Örneğin [count] verirsen count her değiştiğinde yeni fonksiyon oluşur. Bu, hem taze veriyi gören hem de gereksiz render'ı azaltan bir denge kurar. Bağımlılık dizisini unutmak React'in uyarı vermesine yol açar.
Uygulama useCallback ile artır
Bir Counter bileşeni yaz. count state'i tut (useState(0)). handleIncrement işlevini useCallback ile tanımla; bağımlılık dizisi [count] olsun. Bileşen <Text>{count}</Text> döndürsün.
Başlangıç kodu
// useState ve useCallback'i içe aktar
function Counter() {
// count state'ini başlat
// handleIncrement'i useCallback ile tanımla (deps: [count])
return <Text>{count}</Text>;
}Örnek çözüm
import { useState, useCallback } from "react";
import { Text } from "react-native";
function Counter() {
const [count, setCount] = useState(0);
const handleIncrement = useCallback(() => {
setCount(count + 1);
}, [count]);
return <Text>{count}</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useCallback çağrısı
const handleClick = ____(() => { console.log('tıklandı'); }, []);const handleClick = useCallback(() => { console.log('tıklandı'); }, []);Açıklama: useCallback fonksiyonu sabit referansla saklar.
2 useCallback ne döndürür?
const fn = useCallback(() => {}, []);- Bir fonksiyon Doğru cevap
- Bir state
- Bir değer
- Bir dizi
Açıklama: useCallback bir fonksiyon döndürür.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useCallback |
Fonksiyonu saklar |
deps dizisi |
Yeniden hesap koşulu |
stabil referans |
Alt bileşeni atlatır |
boş dizi |
Mount'ta bir kez |