React
Dikkat noktaları
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.
Örnek çözümü göster
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;
Kendini test et
-
useMemo'nun fonksiyonu ne olmalıdır?
- useEffect
- Async
- DOM mutasyonu
- Saf
Cevabı göster
Saf — useMemo'nun fonksiyonu saf olmalıdır.
-
Ek yük
Küçük hesapları useMemo'ya sarmak ____ getirir.
Cevabı göster
Küçük hesapları useMemo'ya sarmak ek yük getirir.
-
useMemo tuzaklarını eşleştir
- küçük hesap
- ek yük
- yan etki
- yasak
- eksik deps
- stale
- saf
- zorunlu
Sıradaki ders: Özet - useMemo
