Advanced · Level 9: React AdvancedAdvanced50 menitBahasa Indonesia

Render Cost

Memahami bahwa re-render punya biaya, tetapi tidak setiap render adalah masalah yang perlu dioptimalkan.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan kapan React component dapat re-render
Membedakan re-render dari perubahan DOM yang terlihat
Menentukan kapan render perlu diselidiki lebih lanjut

ReactRenderingPerformanceDebugging

Isi lesson

5 blok

1.
Render adalah pekerjaan, bukan alarmBelum selesaiWajib
2.
Satu perubahan input dapat melewati beberapa componentBelum selesaiWajib
3.
Re-render berbeda dengan DOM update besarBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Render adalah pekerjaan, bukan alarm

Wajib

React perlu menjalankan component lagi saat state berubah, props berubah, atau parent merender ulang. Proses ini disebut re-render. React kemudian membandingkan hasil render baru dengan UI sebelumnya dan hanya menerapkan perubahan DOM yang diperlukan. Karena itu, re-render tidak otomatis berarti browser membangun ulang seluruh halaman.

Render tetap punya biaya: function component dijalankan kembali, nilai turunan dihitung lagi, dan child component dapat ikut dievaluasi. Pada UI kecil, biaya ini sering tidak terasa. Masalah baru layak diselidiki ketika user merasakan lag, interaksi tertunda, list besar terasa berat, atau profiler menunjukkan pekerjaan berulang yang berarti.

Bagian ini memengaruhi progres lesson.

Satu perubahan input dapat melewati beberapa component

Wajib

tsx

import { useState } from "react";

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

function LessonSearch({ query, onQueryChange }: {
  query: string;
  onQueryChange: (value: string) => void;
}) {
  return (
    <label>
      Cari lesson
      <input value={query} onChange={(event) => onQueryChange(event.target.value)} />
    </label>
  );
}

function LessonList({ lessons }: { lessons: Lesson[] }) {
  return <p>{lessons.length} lesson terlihat.</p>;
}

export function LessonCatalog({ lessons }: { lessons: Lesson[] }) {
  const [query, setQuery] = useState("");
  const visibleLessons = lessons.filter((lesson) =>
    lesson.title.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <section>
      <LessonSearch query={query} onQueryChange={setQuery} />
      <LessonList lessons={visibleLessons} />
    </section>
  );
}

Saat query berubah, LessonCatalog merender ulang untuk menghitung visibleLessons terbaru. LessonSearch dan LessonList juga menerima props baru atau dievaluasi kembali sebagai bagian dari tree. Itu wajar karena hasil UI memang harus mengikuti input. Sebelum menambah memoization, cari dulu bukti bahwa perhitungan atau render ini benar-benar mengganggu pengalaman user.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Re-render berbeda dengan DOM update besar

React dapat memanggil function component tanpa mengubah banyak elemen di browser. Jangan menyimpulkan UI lambat hanya karena melihat render log bertambah. Amati interaksi user dan ukur dengan tool yang tepat sebelum mengubah struktur component.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Saat user mengetik di LessonSearch, kapan re-render tersebut patut dianggap sebagai masalah performance?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Re-render terjadi saat React perlu menghitung UI terbaru dari state, props, atau parent render.
Re-render tidak selalu berarti seluruh DOM berubah atau UI bermasalah.
Cari gejala dan bukti sebelum menambah optimasi.
Berikutnya, kamu akan menggunakan Profiler untuk mengamati pekerjaan render dengan lebih terarah.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Render adalah pekerjaan, bukan alarm.

Memuat progres Review module