Expensive Lists
Mengamati biaya filter dan sorting list lalu memperbaiki jalur kalkulasi hanya bila perubahan itu dibutuhkan.
Tujuan belajar
- Mengenali perhitungan list yang dapat dilakukan ulang saat render
- Memilih dependency useMemo untuk filter dan sorting
- Menjelaskan batas useMemo sebelum membutuhkan virtualisasi atau arsitektur lain
Isi lesson
5 blok- 1.List besar sering mahal karena kerja turunannyaBelum selesaiWajib
- 2.Memoize filter dan sorting dari data sumber yang samaBelum selesaiWajib
- 3.Ukur input yang realistisBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
List besar sering mahal karena kerja turunannya
WajibMasalah list tidak selalu berasal dari jumlah elemen yang terlihat. Filter, sorting, mapping data, format tanggal, atau pencarian beberapa field dapat menjadi pekerjaan berulang setiap render. Jika state lain berubah, perhitungan yang tidak terkait dapat ikut berjalan lagi bila ditulis langsung di body component.
Mulailah dengan membedakan data sumber, input filter, dan hasil turunan. Bila Profiler atau gejala user menunjukkan calculation tersebut mahal, useMemo dapat menyimpan hasilnya sampai input yang relevan berubah. Ini bukan pengganti virtualization untuk data yang benar-benar sangat besar; virtualization dan library khusus memang belum menjadi scope module ini.
Bagian ini memengaruhi progres lesson.
Memoize filter dan sorting dari data sumber yang sama
Wajibimport { useMemo, useState } from "react";
type Activity = {
id: string;
title: string;
status: "open" | "done";
updatedAt: number;
};
export function ActivityBoard({ activities }: { activities: Activity[] }) {
const [query, setQuery] = useState("");
const [showOnlyOpen, setShowOnlyOpen] = useState(false);
const visibleActivities = useMemo(() => {
const normalizedQuery = query.toLowerCase();
return activities
.filter((activity) => !showOnlyOpen || activity.status === "open")
.filter((activity) => activity.title.toLowerCase().includes(normalizedQuery))
.slice()
.sort((first, second) => second.updatedAt - first.updatedAt);
}, [activities, query, showOnlyOpen]);
return (
<section>
<input value={query} onChange={(event) => setQuery(event.target.value)} />
<label>
<input
type="checkbox"
checked={showOnlyOpen}
onChange={(event) => setShowOnlyOpen(event.target.checked)}
/>
Hanya activity terbuka
</label>
<p>{visibleActivities.length} activity terlihat.</p>
</section>
);
}activities, query, dan showOnlyOpen adalah seluruh input calculation. Jika salah satunya berubah, hasil harus dihitung lagi. Jika state lain yang tidak dipakai calculation berubah, useMemo dapat mengembalikan nilai sebelumnya. Jangan menghilangkan dependency hanya agar cache lebih sering dipakai, karena hasil UI dapat menjadi usang.
Bagian ini memengaruhi progres lesson.
Tips
WajibUkur input yang realistis
List berisi tiga item jarang memberi sinyal performance yang berguna. Saat menyelidiki masalah, gunakan jumlah data dan pola interaksi yang mendekati kondisi user. Setelah itu, ubah satu jalur calculation dan ukur ulang dengan skenario yang sama.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususMemoize sorted activity list
Pindahkan filter dan sorting activity ke useMemo agar derived list hanya dihitung ulang ketika inputnya berubah.
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.
Ringkasan
Wajib- Filter dan sorting adalah derived calculation yang dapat terulang saat component merender.
- useMemo memakai data sumber dan semua input filter sebagai dependency.
- Cache tidak boleh mengorbankan hasil UI yang benar atau dependency yang jujur.
- Berikutnya, Uji Kompetensi akan meminta kamu mengukur, menjelaskan, dan memperbaiki satu jalur performance secara terarah.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: List besar sering mahal karena kerja turunannya.