Dikkat noktaları
- React kursu
- Orta seviye
- Ders 23/80
- 4 dk
useMemo'yu aşırı kullanmanın maliyetini öğrenirsin.
Dikkat noktaları
useMemo'nun kötü kullanımı koda zarar verebilir. Üç yaygın hata: küçük hesapları sarmak (ek yük getiri), yan etkili fonksiyonları çağırmak (useMemo saf olmalı), bağımlılıkları unutmak.
Küçük hesaplar için React'in kendi hızı yeterlidir. const sum = useMemo(() => a + b, [a, b]) gibi bir satır, önbellek yükü yüzünden const sum = a + b'den daha yavaş olabilir.
useMemo'nun fonksiyonu saf olmalıdır: API çağrısı, DOM mutasyonu ya da setState içermez. Yan etkiler useEffect içine aittir. Bağımlılık dizisi eksikse, useMemo eski değer döndürür ve hatalara yol açar.
Stale value
useMemo'nun bağımlılık dizisi eksikse, eski değer döner. Bu, stale closure olarak bilinir. Örneğin useMemo(() => compute(count), []) daima ilk count ile hesaplar; güncel count kullanılmaz.
Bu hata, lint uyarılarıyla yakalanır: react-hooks/exhaustive-deps yöntemi eksik bağımlılıkları uyarır. Bu yüzden eslint-plugin-react-hooks eklemek iyi bir alışkanlıktır.
Bazen bilinçli olarak bağımlılık atlarsın (yalnızca ilk değeri istiyorsan). Bu durumda // eslint-disable-next-line ile açıklama eklemek, niyetini belli eder. Ama nadiren yapılır.
Uygulama Toplam ve ortalama
Aşağıdaki iskeleti tamamla. Stats bileşeni yaz. ({ '{ numbers }' }) alsın. stats'ı useMemo(() => { '{ const sum = numbers.reduce((a, b) => a + b, 0); return { '{ sum, avg: sum / numbers.length }' }; }' }, [numbers]) ile hesapla. <p>{ '{ stats.sum }' } / { '{ stats.avg }' }</p> göster. Dışa aktar.
Başlangıç kodu
import { useMemo } from "react";
// Stats bileşenini buraya yazÖrnek çözüm
import { useMemo } from "react";
function Stats({ numbers }) {
const stats = useMemo(() => {
const sum = numbers.reduce((a, b) => a + b, 0);
return { sum, avg: sum / numbers.length };
}, [numbers]);
return <p>{stats.sum} / {stats.avg}.</p>;
}
export default Stats;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useMemo'nun fonksiyonu ne olmalıdır?
- useEffect
- Async
- DOM mutasyonu
- Saf Doğru cevap
Açıklama: useMemo'nun fonksiyonu saf olmalıdır.
2 Ek yük
Küçük hesapları useMemo'ya sarmak ____ getirir.Küçük hesapları useMemo'ya sarmak ek yük getirir.Açıklama: Küçük hesaplar ek yük getirir.
3 useMemo tuzaklarını eşleştir
| Kavram | Anlamı |
|---|---|
küçük hesap |
ek yük |
yan etki |
yasak |
eksik deps |
stale |
saf |
zorunlu |