React Native
useMemo
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.
Örnek çözümü göster
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>;
}
Kendini test et
-
useMemo bağımlılığını yaz
const sorted = useMemo(() => sortItems(items), ____);
Cevabı göster
const sorted = useMemo(() => sortItems(items), [items]);
-
Senaryoyu karara eşle
- 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
-
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
- Bir butona tıklama sayısını tutmak
- Bir bileşeni stillendirmek
Cevabı göster
Büyük dizide toplam hesaplamak — Büyük dizide toplam pahalı bir hesaptır.
Sıradaki ders: Özet - Hooks
