React.memo nedir?

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.

Örnek çözümü göster

import { memo } from "react";

function Card({ name }) {
  return (
    <div>
      <p>{name}</p>
    </div>
  );
}

const MemoCard = memo(Card);

export default MemoCard;

Kendini test et

React.memo neyi önler?
- useEffect'i
- Gereksiz çizim
- CSS değişimini
- useState'i
Cevabı göster

Gereksiz çizim — React.memo gereksiz çizimi önler.

Karşılaştırma

React.memo varsayılan olarak ____ karşılaştırma yapar.

Cevabı göster

React.memo varsayılan olarak sığ karşılaştırma yapar.

React.memo adımlarını eşleştir

React.memo

sarar
shallow

sığ
prop eşit

atlar
useCallback

sabitler

Sıradaki ders: Prop karşılaştırma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler