React.memo nedir?
- React kursu
- Orta seviye
- Ders 29/80
- 4 dk
React.memo ile bir bileşeni prop değişmediğinde yeniden çizilmekten korumayı öğrenirsin.
React.memo nedir?
React.memo, bir bileşeni saran ve prop'lar değişmedikçe yeniden çizimini önleyen yüksek dereceli bileşendir. const MemoCard = React.memo(Card); biçiminde kullanılır.
Bir bileşenin üst bileşeni her çizildiğinde, normalde tüm alt bileşenler de çizilir. React.memo, prop'ların sığ karşılaştırmasını yapar; eşitse çizimi atlar.
En sık kullanım: büyük liste öğeleri, pahalı hesap yapan bileşenler. Bu derste temel kullanımı, sonraki derste özel karşılaştırıcıyı göreceğiz.
Sarmalama yöntemi
React.memo iki biçimde kullanılır. Birincisi değişken atamayla: const MemoCard = React.memo(function Card({ '{ name }' }) { ... });. İkincisi export ile birlikte: export default React.memo(Card);.
Sarmalanan bileşen orijinaliyle aynı davranır; yalnızca ek bir çizim atlatma katmanı ekler. Prop'lar değişmeyince React önceki sonucu tekrar kullanır.
İki uyarı: her bileşeni sarmak performans kaybettirir (sığ karşılaştırma da maliyet). Ayrıca useCallback/useMemo olmadan yeni prop referansları her zaman farklı görünür, memo çalışmaz.
Uygulama MemoCard yaz
Aşağıdaki iskeleti tamamla. Card adında bir bileşen yaz; ({ '{ name }' }) alsın ve <div><p>{ '{ name }' }</p></div> döndürsün. Sonra const MemoCard = React.memo(Card); ile sar. MemoCard'ı dışa aktar.
Başlangıç kodu
import { memo } from "react";
// Card ve MemoCard'ı buraya yazÖrnek çözüm
import { memo } from "react";
function Card({ name }) {
return (
<div>
<p>{name}</p>
</div>
);
}
const MemoCard = memo(Card);
export default MemoCard;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React.memo neyi önler?
- useEffect'i
- Gereksiz çizim Doğru cevap
- CSS değişimini
- useState'i
Açıklama: React.memo gereksiz çizimi önler.
2 Karşılaştırma
React.memo varsayılan olarak ____ karşılaştırma yapar.React.memo varsayılan olarak sığ karşılaştırma yapar.Açıklama: Sığ karşılaştırma yapar.
3 React.memo adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
React.memo |
sarar |
shallow |
sığ |
prop eşit |
atlar |
useCallback |
sabitler |