useMemo
- React Native kursu
- Orta seviye
- Ders 90/116
- 5 dk
useMemo ile hesaplama memoization öğrenirsin.
useMemo nedir?
useMemo, pahalı bir hesabın sonucunu saklayan hook'tür. Bileşen her render olduğunda hesabı tekrar yapmak yerine, bağımlılıklar değişene kadar önbelleğe alınmış sonucu döndürür. const total = useMemo(() => a + b, [a, b]) şeklinde çağrılır.
Ağır hesaplar (büçük diziyi sıralama, filtreleme, karmaşık matematik) render yolunu tıkar. useMemo bu hesabı yalnızca a veya b değiştiğinde çalıştırır. Basit işlemlerde memo yükü faydadan çok olur; yalnızca gerçekten maliyetli hesaplar için kullan. Aynı hesap farklı yerlerde gerekiyorsa tek bir useMemo sonucu paylaşılabilir.
Hesaplama önbelleği
useMemo iki parametre alır: hesap fonksiyonu ve bağımlılık dizisi. Hesap fonksiyonu bir değer döndürür; bu değer önbelleğe alınır. Bağımlılıklar değişene kadar aynı değer döner.
Örnek: const sorted = useMemo(() => items.slice().sort(), [items]). Burada items değişmedikçe sıralama yeniden yapılmaz. Diziyi mutasyona uğratmamak için .slice() ile kopya almak önemlidir. Bağımlılık dizisine tüm dış değişkenleri eklemek, hesabın doğru kalmasını sağlar. Eksik bağımlılık, eski değerle çalışmaya ve zor hatalara yol açar.
Uygulama useMemo ile toplam hesapla
Bir Cart bileşeni yaz. prices dizisi zaten tanımlı: [10, 20, 30]. useMemo ile total'i hesapla; bağımlılık dizisi [prices] olsun. Bileşen <Text>{total}</Text> döndürsün.
Başlangıç kodu
// useMemo'yu içe aktar
function Cart() {
const prices = [10, 20, 30];
// total'i useMemo ile hesapla (deps: [prices])
return <Text>{total}</Text>;
}Örnek çözüm
import { useMemo } from "react";
import { Text } from "react-native";
function Cart() {
const prices = [10, 20, 30];
const total = useMemo(() => {
return prices.reduce((sum, p) => sum + p, 0);
}, [prices]);
return <Text>{total}</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
useMemo |
Değeri önbelleğe alır |
bağımlılık dizisi |
Yeniden hesap koşulu |
pahalı hesap |
Memo için aday |
basit işlem |
Memo gerekmez |
2 useMemo çağrısı
const total = ____(() => a + b, [a, b]);const total = useMemo(() => a + b, [a, b]);Açıklama: useMemo hesap sonucunu önbelleğe alır.
3 useMemo ne döndürür?
const total = useMemo(() => a + b, [a, b]);- Bir fonksiyon
- Hesaplanan değer Doğru cevap
- Bir hook değil
- Bir callback
Açıklama: useMemo hesaplanan değeri döndürür.