0Pricing
Frontend Academy · Pelajaran

useMemo dan useCallback untuk Performa

Memoisasikan perhitungan mahal dengan useMemo dan referensi fungsi yang stabil dengan useCallback untuk mencegah render ulang child yang tidak diperlukan.

useMemo dan useCallback untuk Performa adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Perilaku Bawaan React

Secara bawaan, React merender ulang komponen setiap kali statusnya atau komponen induknya merender ulang. Komponen anak juga merender ulang meskipun propertinya tidak berubah. Untuk sebagian besar komponen, hal ini tidak masalah—React bekerja dengan cepat.

useMemo — Memoisasi Nilai Mahal

useMemo(fn, deps) menyimpan hasil perhitungan. Fungsi tersebut hanya dijalankan ketika dependensinya berubah. Gunakan untuk perhitungan mahal yang tidak efisien jika diulang pada setiap render.

const expensiveResult = useMemo(() => {
  return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changes

useCallback — Memoisasi Fungsi

useCallback(fn, deps) mengembalikan fungsi yang dimemoisasi dan mempertahankan referensi yang sama kecuali dependensinya berubah. Gunakan saat meneruskan fungsi callback ke komponen yang bersarang jauh atau yang dimemoisasi.

const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used

<ItemList items={items} onDelete={handleDelete} />

React.memo — Lewati Render Ulang

React.memo(Component) membungkus komponen agar hanya merender ulang ketika propertinya berubah (perbandingan dangkal). Gabungkan dengan useCallback untuk properti callback yang stabil.

const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
  console.log('Item rendered:', text); // only logs when props change
  return <li>{text} <button onClick={onDelete}>×</button></li>;
});

// onDelete must be stable (from useCallback) for memo to help

Kapan TIDAK Melakukan Optimasi

Optimasi prematur adalah jebakan. useMemo dan useCallback memiliki biaya: closure dan perbandingan dependensi. Untuk operasi murah (memfilter 10 item), biaya tambahan lebih besar daripada manfaatnya. Lakukan optimasi setelah mengukur masalah kinerja yang nyata.

Membuat Profil Sebelum Mengoptimalkan

Gunakan Profiler React DevTools untuk mengukur waktu render yang sebenarnya sebelum menambahkan memorisasi. Profiler menunjukkan komponen mana yang membutuhkan waktu paling lama dan berapa kali komponen tersebut dirender. Lakukan perbaikan berdasarkan bukti, bukan asumsi.

useMemo untuk Referensi Stabil

useMemo juga berguna untuk menjaga referensi tetap stabil—bukan untuk meningkatkan kinerja perhitungannya sendiri, melainkan untuk mencegah memo atau efek di hilir berjalan ulang tanpa perlu.

// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);

// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);

Dependensi useCallback

useCallback mengikuti aturan dependensi yang sama seperti useEffect. Sertakan setiap variabel dari cakupan luar yang digunakan callback. Pengatur status (dari useState) selalu stabil dan tidak perlu disertakan dalam dependensi.

Hubungan useMemo + useCallback

useCallback(fn, deps) setara dengan useMemo(() => fn, deps). Keduanya menggunakan mekanisme yang sama—useCallback hanyalah sintaks singkat untuk memoisasikan fungsi secara khusus.

Memoisasi Item Daftar

Pola yang umum: lakukan memorisasi pada komponen item daftar ketika daftarnya besar dan sering dirender ulang. Teruskan callback stabil dari useCallback agar memorisasi tidak menjadi sia-sia.

const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel  = useCallback((id) => remove(id), []);

{rows.map(row => (
  <MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}

Memoisasi Nilai Konteks

Memoisasikan nilai yang diteruskan ke penyedia Konteks untuk mencegah semua konsumen merender ulang setiap kali komponen induk penyedia merender ulang.

const value = useMemo(() => ({ user, login, logout }), [user]);

Pemeriksaan Cepat

Apa tujuan useCallback?

Rangkuman: useMemo dan useCallback

useMemo menyimpan nilai hasil perhitungan mahal. useCallback menyimpan referensi fungsi. React.memo melewati render ulang ketika properti tidak berubah secara dangkal. Gabungkan ketiganya untuk meningkatkan kinerja pada tingkat komponen. Buat profil terlebih dahulu—memoisasi prematur menambah kompleksitas tanpa manfaat. Referensi stabil mencegah efek dan memo di hilir berjalan ulang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “useMemo dan useCallback untuk Performa” gratis?

Ya — teks lengkap “useMemo dan useCallback untuk Performa” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “useMemo dan useCallback untuk Performa”?

Memoisasikan perhitungan mahal dengan useMemo dan referensi fungsi yang stabil dengan useCallback untuk mencegah render ulang child yang tidak diperlukan. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “useMemo dan useCallback untuk Performa” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. useContext untuk State Global
  2. useReducer untuk State Kompleks
  3. useMemo dan useCallback untuk Performa
  4. Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali
← Kembali ke Frontend Academy