useMemo
- React Native kursu
- Orta seviye
- Ders 5/116
- 5 dk
useMemo ile memoization öğrenirsin.
useMemo nedir?
useMemo pahalı bir hesabı önbelleğe alan hook'tur. const value = useMemo(() => compute(a, b), [a, b]) yazdığında React hesabı bir kez yapar ve a veya b değişene kadar sonucu saklar.
useMemo render sırasında çalışır; yan etki değil, saf hesaplama yapar. Ağır işlemleri (büçük dizi sıralama, büyük liste filtreleme) her render'da tekrar çalışmaktan kurtarır. Bağımlılık dizisi [a, b] doğru yazılmazsa eski değer dönebilir; bu yüzden diziye hesabın girdilerini eksiksiz koy.
Ne zaman kullanılmalı?
useMemo her hesaba değil, yalnızca gerçekten pahalı hesaplara takılır. Küçük hesaplarda useMemo yarar yerine ek yük getirir; React'in kendi diff mantığı daha hızlıdır. Yüzlerce öğeli bir listeyi sıralamak veya büyük bir nesneyi filtrelemek iyi adaylardır.
İkinci kullanım referans kararlılığı: bir nesne veya dizi her render'da yeni referans olursa bunu tüketen alt bileşenler gereksiz render edilir. useMemo ile aynı referansı tutarak bu render'ları önlersin. Böylece alt bileşen React.memo ile sarılıysa fayda sağlar.
Uygulama useMemo ile filtrele
Bir Search bileşeni yaz. items (sayı dizisi) ve query state'i kullan. useMemo ile items'ı query'ye göre filtrele: items.filter(i => i.includes(query)). Bağımlılık dizisi [items, query] olsun. Bileşen <Text>Arama</Text> döndürsün.
Başlangıç kodu
// useMemo'yu içe aktar
function Search() {
const [items, setItems] = useState(["elma", "armut"]);
const [query, setQuery] = useState("");
// useMemo ile items'ı query'ye göre filtrele
return <Text>Arama</Text>;
}Örnek çözüm
import { useMemo, useState } from "react";
import { Text } from "react-native";
function Search() {
const [items, setItems] = useState(["elma", "armut"]);
const [query, setQuery] = useState("");
const filtered = useMemo(() => items.filter(i => i.includes(query)), [items, query]);
return <Text>Arama</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useMemo bağımlılığını yaz
const sorted = useMemo(() => sortItems(items), ____);const sorted = useMemo(() => sortItems(items), [items]);Açıklama: items bağımlılık dizisinde olmalı.
2 Senaryoyu karara eşle
| Kavram | Anlamı |
|---|---|
Büyük listeyi sırala |
useMemo kullan |
Küçük hesap |
useMemo'süz bırak |
Her render'da yeni nesne |
useMemo ile sabitle |
Ağ çağrısı |
useEffect kullan |
3 Aşağıdakilerden hangisi useMemo için uygun bir senaryodur?
const total = useMemo(() => sum(bigArray), [bigArray]);- Bir ağ çağrısı yapmak
- Büyük dizide toplam hesaplamak Doğru cevap
- Bir butona tıklama sayısını tutmak
- Bir bileşeni stillendirmek
Açıklama: Büyük dizide toplam pahalı bir hesaptır.