useMemo nedir?
- React kursu
- Orta seviye
- Ders 21/80
- 4 dk
useMemo ile pahalı bir hesabı önbelleğe almayı öğrenirsin.
useMemo nedir?
useMemo, pahalı bir hesabı yalnızca bağımlılıklar değiştiğinde yeniden yapan bir kancadır. const value = useMemo(() => compute(a, b), [a, b]); biçiminde kullanılır.
Her render'da React, compute fonksiyonunu çağırmak yerine önbelleğe alınmış değeri döndürür. Yalnızca a ya da b değiştiğinde fonksiyon tekrar çalışır. Bu, özellikle büyük listelerin filtrelenmesi ya da karmaşık hesaplar için hız artışı sağlar.
İki uyarı: önbellek bellek tutar; küçük hesapları sarmak daha yavaş olabilir. Ayrıca useMemo'yu bırakıp React'in kendi hızına güvenmek de çoğu zaman iyidir. Yalnızca gerçekten yavaş bir hesap varsa kullan.
Pahalı hesap örneği
Bir listede 1000 öğe var ve kullanıcı bir arama metni giriyor. Her render'da items.filter(i => i.name.includes(query)) çağrılırsa, 1000 satır her seferinde taranır.
useMemo(() => items.filter(i => i.name.includes(query)), [items, query]) ile yalnızca items ya da query değiştiğinde filtreleme yapılır. Diğer render'larda önbellekten okunur.
Bu, büyük listelerde ciddi hız artışı sağlar. Ama küçük listelerde (<50 öğe) fark edilmez; ek yük bile getirebilir. useMemo'yu profil ile doğrulamadan eklemek iyi bir alışkanlık değildir.
Uygulama useMemo ile filtre
Aşağıdaki iskeleti tamamla. SearchList bileşeni yaz. ({ '{ items, query }' }) alsın. visible'ı useMemo(() => items.filter(i => i.name.includes(query)), [items, query]) ile hesapla. <ul> içinde visible.map(i => <li key={ '{ i.id }' }>{ '{ i.name }' }</li>) çiz. Dışa aktar.
Başlangıç kodu
import { useMemo } from "react";
// SearchList bileşenini buraya yazÖrnek çözüm
import { useMemo } from "react";
function SearchList({ items, query }) {
const visible = useMemo(() => items.filter((i) => i.name.includes(query)), [items, query]);
return (
<ul>
{visible.map((i) => (
<li key={i.id}>{i.name}</li>
))}
</ul>
);
}
export default SearchList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useMemo ne zaman kullanılır?
- Her render'da yeniden hesap için
- Pahalı hesapta önbellek için Doğru cevap
- useEffect yerine
- DOM güncellemek için
Açıklama: Pahalı hesapları önbelleğe almak için.
2 Bağımlılık
useMemo'nun ikinci parametresi ____ dizisidir.useMemo'nun ikinci parametresi bağımlılık dizisidir.Açıklama: İkinci parametre bağımlılık dizisidir.
3 useMemo adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
compute |
Hesap |
deps |
Bağımlılık |
cache |
Önbellek |
recompute |
Yeniden |