React.memo: Props Aynıyken Yeniden Render'ı Atlamak

memo, props'u geçen seferkiyle aynı olduğunda bir bileşenin yeniden render'ı atlamasını sağlar. Bir bileşeni memo(...) ile sar; ebeveyni render olduğunda React önce her yeni prop'u eskisiyle karşılaştırır, hepsi eşitse bileşeni yeniden çağırmak yerine önceki sonucu yeniden kullanır.

import { memo, useState } from 'react';

const items = ['Apples', 'Bread', 'Cheese', 'Dates'];

const SlowList = memo(function SlowList({ items }) {
    console.log('render SlowList');
    const start = performance.now();
    while (performance.now() - start < 150) {
        // pretend this list takes 150 ms to render
    }
    return (
        <ul>
            {items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    );
});

export default function App() {
    const [text, setText] = useState('');
    return (
        <div>
            <input
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Type quickly"
            />
            <p>You typed: {text}</p>
            <SlowList items={items} />
        </div>
    );
}

Input'a yaz: hızına yetişir ve Console render SlowList'i yalnızca bir kez, ilk render'dan gösterir. memo( sarmalayıcısını (ve kapanış parantezini) kaldır ve yeniden yaz: her tuş vuruşu artık liste için 150 ms bekler ve bir render kaydeder.

Sözdizimi

import { memo } from 'react';

const MemoizedComponent = memo(SomeComponent, arePropsEqual?);

• SomeComponent herhangi bir fonksiyon bileşenidir. Olağan stil tanımı doğrudan sarmaktır: const Card = memo(function Card(props) { ... }). İçteki fonksiyona ad vermek adı React DevTools'ta ve hata mesajlarında korur.
• arePropsEqual isteğe bağlıdır ve nadiren gerekir (aşağıya bak).
• Sonuç, diğer her bileşen gibi render ettiğin bir bileşendir.

Varsayılan olarak React eski ve yeni props'u sığ (shallow) olarak karşılaştırır: her prop'u Object.is ile kontrol eder. Metinler, sayılar ve boolean'lar değere göre karşılaştırılır, yani title="Hi", title="Hi"'ye eşittir. Nesneler, diziler ve fonksiyonlar referansa göre karşılaştırılır: içeriği aynı olan iki nesne yine de farklı nesnelerdir.

Yukarıdaki örnekte items bileşenin dışında tanımlanmıştır, bu yüzden her render'da aynı dizidir ve karşılaştırma geçer.

Yeni nesneler ve fonksiyonlar memo'yu boşa çıkarır

Ebeveynin gövdesinde literal olarak yazılan her şey her render'da yeniden oluşturulur: { name: 'Ada' }, [1, 2, 3], () => save(). Birini bir memo bileşenine aktar; prop öncekine asla eşit olmaz.

import { memo, useState } from 'react';

const Badge = memo(function Badge({ label, user, name }) {
    console.log('render Badge', label);
    return (
        <p>
            {label}: {user ? user.name : name}
        </p>
    );
});

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>Clicked {count}</button>
            <Badge label="object prop" user={{ name: 'Ada' }} />
            <Badge label="string prop" name="Ada" />
        </div>
    );
}

Her tıklama render Badge object prop kaydeder ama metin sürümünü asla kaydetmez. Nesne durumunu düzeltmenin üç yolu var:

• İlkel değerler aktar. Çocuğun yalnızca bir iki alana ihtiyacı varsa user={{ name: 'Ada' }} yerine name="Ada".
• Sabitleri bileşenin dışına taşı. Hiç değişmeyen bir nesne, ilk örnekteki items gibi modül düzeyinde yaşayabilir.
• Onu önbelleğe al. Props ya da state'ten oluşturulan nesneleri ve dizileri useMemo ile, fonksiyonları useCallback ile sar.

children'ın da aynı sorunu vardır. <Card><p>Hello</p></Card> her render'da yeni bir <p> öğe nesnesi oluşturur, bu yüzden children alan bir memo Card her seferinde yeniden render olur.

memo'nun durdurmadıkları

memo yalnızca ebeveynden gelen props'a bakar. Memoize edilmiş bir bileşen yine de şu durumlarda render olur:

• kendi state'i değiştiğinde, kendi useState ya da useReducer'ı aracılığıyla;
• okuduğu bir context değiştiğinde, useContext aracılığıyla.

import { createContext, memo, useContext, useState } from 'react';

const ThemeContext = createContext('light');

const Panel = memo(function Panel() {
    const theme = useContext(ThemeContext);
    const [likes, setLikes] = useState(0);
    console.log('render Panel', theme, likes);
    return (
        <div>
            <p>Theme: {theme}</p>
            <button onClick={() => setLikes(likes + 1)}>Like ({likes})</button>
        </div>
    );
});

export default function App() {
    const [count, setCount] = useState(0);
    const [theme, setTheme] = useState('light');
    return (
        <ThemeContext value={theme}>
            <button onClick={() => setCount(count + 1)}>Unrelated: {count}</button>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
                Switch theme
            </button>
            <Panel />
        </ThemeContext>
    );
}

Unrelated'a tıkla; Panel atlanır. Temayı değiştir; render olur, çünkü context'i okur. Like'a tıkla; render olur, çünkü kendi state'i değişti. Amaçlanan davranış budur: memo, bileşenin bağlı olduğu hiçbir şey değişmediğinde işi atlamakla ilgilidir; context ve state ise onun bağlı olduğu şeylerdir.

Özel bir karşılaştırma fonksiyonu

İkinci argüman sığ karşılaştırmanın yerini alır. Önceki ve sonraki props'u alır ve eşit sayılmaları gerektiğinde true döndürür; bu da React'in render'ı atlaması demektir.

const MemoChart = memo(Chart, (prev, next) => {
    return (
        prev.points.length === next.points.length &&
        prev.points.every((p, i) => p === next.points[i]) &&
        prev.color === next.color &&
        prev.onSelect === next.onSelect
    );
});

Buna nadiren ihtiyacın olur ve yanlış yapması kolaydır. Fonksiyon bir prop'u yok sayarsa bileşen o prop'un eski değerini göstermeye devam eder. Bir fonksiyon prop'unu yok saymak en kötü durumdur: atlanan bileşen eski state'i okuyan eski fonksiyonu çağırmaya devam eder. Her prop'u karşılaştır ve büyük veriler üzerinde derin eşitlik kontrolleri yapma, çünkü o zaman karşılaştırma kurtardığı render'dan daha pahalıya mal olur. useMemo ve useCallback ile sabit props neredeyse her zaman daha iyi bir çözümdür.

memo'nun çalıştığını kontrol etmek

En hızlı kontrol bu sayfada kullanılandır: bileşenin en üstünde bir console.log. Bir atlama beklerken yazdırıyorsa props'u da kaydet ve değişeni bulmak için öncekilerle karşılaştır. Gerçek bir projede React DevTools daha fazla yardımcı olur: her etkileşimde hangi bileşenlerin yanıp söndüğünü görmek için ayarlarında "Highlight updates when components render" seçeneğini aç; Profiler sekmesi de her render'ı ve, ilgili ayar açıkken, her bileşenin neden render olduğunu kaydeder.

İki şey memo'nun başarısız olması gibi görünür ama değildir:

• İlk render her zaman olur. memo yalnızca bileşen bu props ile bir kez render olduktan sonraki render'ları atlar.
• Geliştirme derlemeleri daha fazla render edebilir. StrictMode altında React, saf olmayan kodu yakalamak için geliştirmede her bileşeni iki kez render eder. Buradaki önizleme bir production derlemesi gibi çalışır, bu yüzden yukarıdaki her kayıt satırı bir gerçek render demektir.

memo ne zaman kullanılmalı

Bir bileşenin render'ı yavaş olduğunda ve ebeveyni onun için sık sık aynı props ile render olduğunda memo değer: bir input'un yanındaki uzun bir liste ya da bir grafik, her saniye güncellenen bir sayfanın içindeki bir kenar çubuğu. Hızlı render olan ya da props'u zaten her seferinde değişen bileşenler için bir karşılaştırma ekler ve hiçbir şey kazandırmaz. Memoize etmeden önce bunun yerine yeniden yapılandırıp yapılandıramayacağına bak; render sayfasında gösterildiği gibi state'i aşağı taşıyarak ya da JSX'i children olarak aktararak.

Projen kullanıyorsa React Compiler 1.0, bileşenleri ve props'larını derleme zamanında otomatik olarak memoize eder; bu da çoğu manuel memo çağrısını gereksiz kılar. O olmadan memo tam olarak burada anlatıldığı gibi çalışır ve React kodunda yaygın olmaya devam eder.