React
useMemo nedir?
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.
Örnek çözümü göster
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;
Kendini test et
-
useMemo ne zaman kullanılır?
- Her render'da yeniden hesap için
- Pahalı hesapta önbellek için
- useEffect yerine
- DOM güncellemek için
Cevabı göster
Pahalı hesapta önbellek için — Pahalı hesapları önbelleğe almak için.
-
Bağımlılık
useMemo'nun ikinci parametresi ____ dizisidir.
Cevabı göster
useMemo'nun ikinci parametresi bağımlılık dizisidir.
-
useMemo adımlarını eşleştir
- compute
- Hesap
- deps
- Bağımlılık
- cache
- Önbellek
- recompute
- Yeniden
Sıradaki ders: Bağımlılık kontrolü
