Memoization: useMemo, useCallback, React.memo

Penjelasan

Tiga tools memoization di React: useMemo (menyimpan HASIL kalkulasi mahal, hanya dihitung ulang kalau dependency-nya berubah), useCallback (menyimpan REFERENSI fungsi supaya tidak dibuat ulang tiap render, penting saat fungsi itu jadi props komponen anak), dan React.memo (membungkus komponen supaya TIDAK render ulang kalau props-nya tidak berubah).

Contoh Konsep

import { useMemo, useCallback, memo } from 'react';

function DaftarBesar({ data, filterAktif }) {
    const hasilFilter = useMemo(() => {
        return data.filter((item) => item.aktif === filterAktif); // cuma dihitung ulang kalau data/filterAktif berubah
    }, [data, filterAktif]);

    const handleKlik = useCallback(() => {
        console.log('diklik');
    }, []); // referensi fungsi stabil antar render

    return <TombolAnak onKlik={handleKlik} hasil={hasilFilter} />;
}

const TombolAnak = memo(function TombolAnak({ onKlik, hasil }) {
    return <button onClick={onKlik}>{hasil.length} item</button>;
});

Praktikum

Buat komponen dengan array angka besar (mis. 1000 elemen). Pakai useMemo untuk menghitung total penjumlahannya, supaya penjumlahan itu TIDAK dihitung ulang setiap kali komponen dirender ulang karena state lain berubah.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

JANGAN memoize semua hal secara membabi buta — useMemo/useCallback juga punya biaya (menyimpan cache, membandingkan dependency tiap render), dan untuk kalkulasi/fungsi SEDERHANA justru bisa lebih lambat dari tanpa memoization. Pakai HANYA saat sudah terbukti ada masalah performa nyata (mis. lewat React DevTools Profiler).