React.memo: Lewati Render Ulang Saat Props Sama

memo memungkinkan sebuah komponen melewatkan render ulang saat props-nya sama dengan sebelumnya. Bungkus komponen dengan memo(...), dan saat induknya merender, React lebih dulu membandingkan setiap prop baru dengan yang lama; jika semuanya sama, React memakai ulang hasil sebelumnya alih-alih memanggil komponen itu lagi.

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>
    );
}

Ketik di input-nya: input tetap responsif, dan Konsol hanya menampilkan render SlowList sekali, dari render pertama. Hapus wrapper memo( (beserta tanda kurung penutupnya) lalu ketik lagi: setiap ketukan tombol sekarang menunggu 150 ms untuk list-nya dan mencatat sebuah render.

Sintaksnya

import { memo } from 'react';

const MemoizedComponent = memo(SomeComponent, arePropsEqual?);

• SomeComponent adalah function component apa pun. Gaya yang umum adalah langsung membungkus definisinya: const Card = memo(function Card(props) { ... }). Memberi nama pada fungsi di dalamnya menjaga nama itu tetap muncul di React DevTools dan di pesan error.
• arePropsEqual bersifat opsional dan jarang dibutuhkan (lihat di bawah).
• Hasilnya adalah komponen yang kamu render seperti komponen lain.

Secara default, React membandingkan props lama dan baru secara dangkal: setiap prop diperiksa dengan Object.is. String, angka, dan boolean dibandingkan berdasarkan nilai, jadi title="Hi" sama dengan title="Hi". Objek, array, dan fungsi dibandingkan berdasarkan referensi: dua objek dengan isi yang sama tetaplah objek yang berbeda.

Di contoh di atas, items dideklarasikan di luar komponen, jadi array-nya sama di setiap render, dan perbandingannya lolos.

Objek dan fungsi baru menggagalkan memo

Apa pun yang ditulis sebagai literal di dalam isi komponen induk dibuat ulang di setiap render: { name: 'Ada' }, [1, 2, 3], () => save(). Kirim salah satunya ke komponen memo, dan prop itu tidak pernah sama dengan yang sebelumnya.

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>
    );
}

Setiap klik mencatat render Badge object prop, tetapi tidak pernah versi string-nya. Ada tiga cara memperbaiki kasus objek:

• Kirim nilai primitif. name="Ada", bukan user={{ name: 'Ada' }}, saat komponen anak hanya butuh satu atau dua field.
• Pindahkan konstanta ke luar komponen. Objek yang tidak pernah berubah bisa tinggal di level modul, seperti items di contoh pertama.
• Simpan di cache. Bungkus objek dan array yang dibuat dari props atau state dengan useMemo, dan fungsi dengan useCallback.

children punya masalah yang sama. <Card><p>Hello</p></Card> membuat objek elemen <p> baru di setiap render, jadi Card yang memakai memo dan menerima children akan dirender ulang setiap kali.

Yang tidak dicegah memo

memo hanya melihat props yang datang dari induk. Komponen yang memakai memo tetap merender saat:

• state miliknya sendiri berubah, lewat useState atau useReducer miliknya;
• context yang dibacanya berubah, lewat useContext.

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>
    );
}

Klik Unrelated, dan Panel dilewati. Ganti tema, dan komponen itu merender, karena ia membaca context. Klik Like, dan ia merender lagi, karena state miliknya sendiri berubah. Itulah perilaku yang dimaksudkan: memo adalah tentang melewatkan pekerjaan saat tidak ada yang berubah dari hal-hal yang menjadi dependensi komponen, dan context serta state termasuk dependensinya.

Fungsi perbandingan kustom

Argumen kedua menggantikan perbandingan dangkal. Fungsi ini menerima props sebelumnya dan berikutnya, lalu mengembalikan true saat keduanya harus dianggap sama, yang berarti React melewatkan render.

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
    );
});

Kamu jarang membutuhkan ini, dan mudah sekali salah. Jika fungsinya mengabaikan sebuah prop, komponen itu terus menampilkan nilai lama prop tersebut. Mengabaikan prop berupa fungsi adalah kasus terburuk: komponen yang dilewati terus memanggil fungsi lama, yang membaca state lama. Bandingkan setiap prop, dan jangan lakukan pemeriksaan kesamaan mendalam pada data besar, karena perbandingannya jadi lebih mahal daripada render yang dihematnya. Props yang stabil lewat useMemo dan useCallback hampir selalu menjadi perbaikan yang lebih baik.

Memeriksa apakah memo berfungsi

Cara memeriksa yang paling cepat adalah yang dipakai di halaman ini: console.log di bagian atas komponen. Jika log tercetak saat kamu mengharapkan render dilewati, catat juga props-nya, lalu bandingkan dengan yang sebelumnya untuk menemukan prop yang berubah. Di proyek sungguhan, React DevTools membantu lebih jauh: nyalakan "Highlight updates when components render" di pengaturannya untuk melihat komponen mana yang berkedip di setiap interaksi, dan tab Profiler merekam setiap render dan, dengan pengaturan yang sesuai dinyalakan, alasan setiap komponen merender.

Ada dua hal yang terlihat seperti memo gagal padahal tidak:

• Render pertama selalu terjadi. memo hanya melewatkan render setelah komponen dirender sekali dengan props tersebut.
• Build development bisa merender lebih banyak. Di bawah StrictMode, React merender setiap komponen dua kali saat development untuk menangkap kode yang tidak murni. Pratinjau di sini berjalan seperti build production, jadi setiap baris log di atas berarti satu render sungguhan.

Kapan memakai memo

memo layak dipakai saat sebuah komponen lambat dirender dan induknya sering merender dengan props yang sama untuknya: list panjang atau grafik di samping input, sidebar di dalam halaman yang diperbarui setiap detik. Untuk komponen yang cepat dirender, atau yang props-nya memang berubah setiap kali, memo hanya menambah perbandingan tanpa memberi manfaat. Sebelum melakukan memoization, lihat apakah kamu bisa mengubah strukturnya, dengan memindahkan state ke bawah atau mengirim JSX sebagai children, seperti yang ditunjukkan di halaman rendering.

React Compiler 1.0, jika proyekmu memakainya, melakukan memoization pada komponen dan props-nya secara otomatis saat build, sehingga sebagian besar pemanggilan memo manual tidak lagi diperlukan. Tanpa React Compiler, memo bekerja persis seperti yang dijelaskan di sini dan tetap umum di kode React.