Bağımlılık kontrolü
- React kursu
- Orta seviye
- Ders 22/80
- 4 dk
useMemo'nun ne zaman yeniden hesapladığını öğrenirsin.
Bağımlılık kontrolü
useMemo'nun bağımlılık dizisi neyin değişeceğini söyler. [items, query] dizi öğelerinden herhangi biri değişirse, React fonksiyonu yeniden çağırır.
Değişmezlik (immutability) şarttır: eğer items.push(newItem) ile diziye eleman eklersen, React diziyi değişmiş saymaz (aynı referans). Bunun yerine setItems(prev => [...prev, newItem]) ile yeni dizi oluşturulur.
Bu yüzden React'te state hep yeni nesnelerle güncellenir. Eski nesneyi mutasyona uğratmak hem React'in değişimi kaçırmasına hem de bazı hook'ların yanlış davranmasına yol açar.
Nesne referansı
JavaScript'te nesneler referans ile karşılaştırılır. [1,2] === [1,2] yanlışdır; iki ayrı dizi farklı nesnedir. Ama const a = [1,2]; a === a doğrudur; aynı nesne.
React bu karşılaştırmayı kullanır: bağımlılık dizisindeki bir değer önceki ile aynı referans mı, değil mi? Aynıysa önbellek kullanılır; farklıysa hesap yeniden yapılır.
Bu yüzden state'i güncellerken hep yeni nesne oluşturulur. setUser({ '{ ...user, name: "Ayşe" }' }) yeni bir nesne yapar; React değişimi algılar. user.name = "Ayşe" yapmaz.
Uygulama useMemo ile sıralama
Aşağıdaki iskeleti tamamla. SortedNames bileşeni yaz. ({ '{ names }' }) alsın. sorted'u useMemo(() => [...names].sort(), [names]) ile hesapla. <ul> içinde sorted.map((n, i) => <li key={ '{ i }' }>{ '{ n }' }</li>) çiz. Dışa aktar.
Başlangıç kodu
import { useMemo } from "react";
// SortedNames bileşenini buraya yazÖrnek çözüm
import { useMemo } from "react";
function SortedNames({ names }) {
const sorted = useMemo(() => [...names].sort(), [names]);
return (
<ul>
{sorted.map((n, i) => (
<li key={i}>{n}</li>
))}
</ul>
);
}
export default SortedNames;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useMemo ne zaman yeniden hesaplar?
- Her render'da
- useEffect'te
- Bağımlılık değiştiğinde Doğru cevap
- Hiçbir zaman
Açıklama: Yalnızca bağımlılık değişince.
2 Mutasyon
Diziye push ile eleman eklemek ____ olarak adlandırılır ve React tarafından fark edilmez.Diziye push ile eleman eklemek mutasyon olarak adlandırılır ve React tarafından fark edilmez.Açıklama: push ile ekleme mutasyondur.
3 Bağımlılık kontrolünü eşleştir
| Kavram | Anlamı |
|---|---|
[items, query] |
bağımlılık |
aynı referans |
önbellek |
yeni referans |
yeniden |
push |
mutasyon |