Advanced · Level 14: PerformanceAdvanced70 menitBahasa Indonesia

Expensive Re-renders

Mendiagnosis render work yang mahal sebelum memilih memoization atau perubahan component structure.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan React render dari DOM commit yang benar-benar terlihat user
Mengenali derived calculation yang berulang saat state berubah
Memakai React DevTools Profiler untuk mencari jalur yang relevan
Menggunakan useMemo setelah ada alasan measurement yang jelas

ReactRe-renderProfileruseMemoPerformance

Isi lesson

6 blok

1.
Re-render bukan otomatis masalah, tetapi work berulang perlu dibacaBelum selesaiWajib
2.
Cache derived lesson list setelah measurementBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Profiler menjawab pertanyaan yang lebih baik daripada asumsiBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Re-render bukan otomatis masalah, tetapi work berulang perlu dibaca

Wajib

React dapat merender component lagi ketika state atau props berubah. Itu belum berarti DOM selalu berubah atau user langsung mengalami lambat. Masalah muncul ketika render memicu derived calculation, sorting, filtering, atau tree besar yang memang mahal pada interaction yang sering terjadi. Jangan memasang memoization hanya karena melihat component render lebih dari sekali. Mulai dari symptom user, buat baseline, lalu gunakan React DevTools Profiler untuk melihat commit serta component yang memakan waktu. Setelah jalur mahal ditemukan, pilih perbaikan paling kecil yang menjaga code tetap dapat dibaca.

Bagian ini memengaruhi progres lesson.

Cache derived lesson list setelah measurement

Wajib

tsx

import { useMemo, useState } from "react";

type Lesson = {
  title: string;
  duration: number;
  status: "ready" | "draft";
};

function LessonFilterBoard({ lessons }: { lessons: Lesson[] }) {
  const [query, setQuery] = useState("");
  const [showReady, setShowReady] = useState(false);

  const visibleLessons = useMemo(() => {
    return lessons
      .filter((lesson) => !showReady || lesson.status === "ready")
      .filter((lesson) =>
        lesson.title.toLowerCase().includes(query.toLowerCase()),
      )
      .slice()
      .sort((a, b) => b.duration - a.duration);
  }, [lessons, query, showReady]);

  return <p>{visibleLessons.length} lesson terlihat.</p>;
}

useMemo digunakan di sini untuk meng-cache hasil filter dan sort sampai lessons, query, atau showReady berubah. Ia bukan jaminan global bahwa component lebih cepat. Sebelum memilihnya, pastikan calculation memang muncul pada profiler atau memengaruhi interaction user. React masih dapat merender component untuk alasan lain, dan DOM tetap hanya diubah ketika output yang relevan berbeda.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Memoize measured lesson filter

Cache filter dan sorting lesson setelah measurement menunjukkan derived calculation ini perlu diperhatikan.

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.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa langkah paling tepat sebelum menambah useMemo ke sebuah derived calculation?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Profiler menjawab pertanyaan yang lebih baik daripada asumsi

Jangan menilai performance dari satu angka render atau dari dugaan bahwa list pasti lambat. Rekam interaction spesifik, lihat component serta commit yang relevan, dan bandingkan setelah perubahan. Jika user tidak mengalami masalah dan profile tidak menunjukkan work bermakna, code sederhana sering menjadi pilihan yang lebih baik.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

React render ulang tidak otomatis berarti DOM atau pengalaman user memburuk.
Cari symptom dan jalur interaction sebelum mengubah component.
React DevTools Profiler membantu membaca commit serta component yang relevan.
useMemo cocok untuk calculation mahal yang telah diukur dan memiliki dependency jelas.
Berikutnya, Uji Kompetensi menggabungkan hydration, boundary client, dan reasoning perbaikan render dalam satu kasus route.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Re-render bukan otomatis masalah, tetapi work berulang perlu dibaca.

Memuat progres Review module