Özet - useMemo
- React kursu
- Orta seviye
- Ders 24/80
- 5 dk
Büyük listeyi filtreleyip sıralayan hesabı useMemo ile sararsın.
Özet - useMemo
Bu grupta useMemo'nun ne olduğunu, bağımlılık kontrolünü ve dikkat noktalarını öğrendin. Artık pahalı hesapları güvenle önbelleğe alabilirsin.
Reçete: yalnızca gerçekten yavaş hesapları useMemo'ya sar, bağımlılık dizisini eksiksiz yaz, fonksiyonu saf tut. Bu üç adım, useMemo'nun hız getirip zarar vermemesini sağlar.
Bir sonraki adımda hem filtre hem sıralama yapan bir liste bileşeni yazacaksın.
Uygulama FilterSortList yaz
Aşağıdaki iskeleti tamamla. FilterSortList bileşeni yaz. ({ '{ items, query }' }) alsın. visible'ı useMemo(() => items.filter(i => i.name.includes(query)).sort((a, b) => a.name.localeCompare(b.name)), [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";
// FilterSortList bileşenini buraya yazÖrnek çözüm
import { useMemo } from "react";
function FilterSortList({ items, query }) {
const visible = useMemo(
() => items.filter((i) => i.name.includes(query)).sort((a, b) => a.name.localeCompare(b.name)),
[items, query],
);
return (
<ul>
{visible.map((i) => (
<li key={i.id}>{i.name}</li>
))}
</ul>
);
}
export default FilterSortList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useMemo ne zaman yazılmamalı?
- Küçük hesaplar için Doğru cevap
- Pahalı hesaplar için
- Büyük liste filtreleri için
- Karmaşık hesap için
Açıklama: Küçük hesaplar için kullanılmamalı.
2 useMemo reçetesini eşleştir
| Kavram | Anlamı |
|---|---|
pahalı |
kullan |
küçük |
kullanma |
saf |
zorunlu |
deps |
eksiksiz |