Advanced · Level 9: React AdvancedAdvanced70 menitBahasa Indonesia

useMemo and useCallback When Useful

Menggunakan useMemo dan useCallback untuk kasus terukur, bukan sebagai default di setiap React component.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan nilai yang di-cache useMemo dan function reference yang di-cache useCallback
Menjelaskan hubungan useCallback dengan child yang dimemoize
Menerapkan memoization pada list yang memiliki alasan jelas

ReactuseMemouseCallbackmemoPerformance

Isi lesson

5 blok

1.
Memoization adalah alat keputusanBelum selesaiWajib
2.
Filter list dan handler stabil untuk row yang dimemoizeBelum selesaiWajib
3.
Memoization tidak membuat semua render menjadi gratisBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Memoization adalah alat keputusan

Wajib

useMemo menyimpan hasil perhitungan agar React dapat memakai kembali nilai yang sama selama dependency tidak berubah. useCallback menyimpan referensi function dengan aturan dependency yang sama. Keduanya menambah kode, dependency, dan hal yang perlu dipikirkan saat review.

Gunakan useMemo ketika perhitungan memang terbukti mahal atau nilai stabil diperlukan oleh consumer yang dimemoize. Gunakan useCallback ketika function reference yang berubah membuat child memoized melakukan pekerjaan yang tidak perlu. Jika tidak ada masalah terukur atau consumer yang membutuhkan stabilitas referensi, function dan perhitungan biasa biasanya lebih mudah dirawat.

Bagian ini memengaruhi progres lesson.

Filter list dan handler stabil untuk row yang dimemoize

Wajib

tsx

import { memo, useCallback, useMemo, useState } from "react";

type Lesson = {
  id: string;
  title: string;
};

const lessons: Lesson[] = [
  { id: "html", title: "Semantic HTML" },
  { id: "react", title: "React Performance" },
];

const LessonRow = memo(function LessonRow({
  lesson,
  selected,
  onSelect,
}: {
  lesson: Lesson;
  selected: boolean;
  onSelect: (id: string) => void;
}) {
  return (
    <li>
      <button type="button" onClick={() => onSelect(lesson.id)}>
        {selected ? "Dipilih: " : ""}{lesson.title}
      </button>
    </li>
  );
});

export function LessonCatalog() {
  const [query, setQuery] = useState("");
  const [selectedId, setSelectedId] = useState("html");
  const visibleLessons = useMemo(
    () => lessons.filter((lesson) => lesson.title.toLowerCase().includes(query.toLowerCase())),
    [query],
  );
  const handleSelect = useCallback((id: string) => setSelectedId(id), []);

  return (
    <section>
      <input value={query} onChange={(event) => setQuery(event.target.value)} />
      <ul>
        {visibleLessons.map((lesson) => (
          <LessonRow
            key={lesson.id}
            lesson={lesson}
            selected={lesson.id === selectedId}
            onSelect={handleSelect}
          />
        ))}
      </ul>
    </section>
  );
}

visibleLessons hanya dihitung ulang saat query berubah. handleSelect memiliki referensi stabil sehingga LessonRow yang dibungkus memo dapat membandingkan props dengan lebih berguna ketika perubahan lain terjadi. Contoh ini masuk akal bila pengukuran menunjukkan list atau row memang menjadi biaya. Untuk dua item sederhana tanpa gejala, pola yang lebih langsung dapat lebih baik.

Bagian ini memengaruhi progres lesson.

Peringatan

Wajib

Memoization tidak membuat semua render menjadi gratis

useMemo dan useCallback juga menjalankan perbandingan dependency dan menyimpan nilai. memo hanya membantu bila props child benar-benar tetap sama dan child memiliki pekerjaan yang layak dihindari. Jangan membungkus semua component, object, dan callback hanya untuk terlihat optimized.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Memoize filtered lesson list

Memoize calculation filter dan stabilkan handler untuk row lesson yang dimemoize setelah ada alasan untuk mengurangi pekerjaan berulang.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis5 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

useMemo menyimpan hasil perhitungan; useCallback menyimpan referensi function.
memoization perlu alasan dari pengukuran atau kebutuhan consumer yang dimemoize.
Dependency harus menggambarkan nilai yang benar-benar dipakai oleh calculation atau callback.
Berikutnya, kamu akan menerapkan keputusan ini pada filter dan sorting list yang lebih mahal.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Memoization adalah alat keputusan.

Memuat progres Review module