React
Bağımlılık kontrolü
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.
Örnek çözümü göster
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;
Kendini test et
-
useMemo ne zaman yeniden hesaplar?
- Her render'da
- useEffect'te
- Bağımlılık değiştiğinde
- Hiçbir zaman
Cevabı göster
Bağımlılık değiştiğinde — Yalnızca bağımlılık değişince.
-
Mutasyon
Diziye push ile eleman eklemek ____ olarak adlandırılır ve React tarafından fark edilmez.
Cevabı göster
Diziye push ile eleman eklemek mutasyon olarak adlandırılır ve React tarafından fark edilmez.
-
Bağımlılık kontrolünü eşleştir
- [items, query]
- bağımlılık
- aynı referans
- önbellek
- yeni referans
- yeniden
- push
- mutasyon
Sıradaki ders: Dikkat noktaları
