Tujuan Pembelajaran

Mengerti browser rendering pipeline
Bisa mengoptimasi JavaScript execution
Mengerti memoization dan virtualization

Analogi

Diagram


      Rendering Pipeline:
JavaScript -> Style -> Layout -> Paint -> Composite

Optimasi:
├── Memoization (React.memo, useMemo)
├── Virtualization (react-window)
├── Debounce/Throttle event handlers
└── Web Workers untuk heavy computation

Browser rendering pipeline adalah proses mengubah kode menjadi pixel di layar — optimasi di setiap stage penting

Penjelasan Konsep

Setelah halaman diload, performa runtime menjadi krusial. INP (Interaction to Next Paint) mengukur seberapa cepat browser merespons interaksi user.

Browser Rendering Pipeline

JavaScript -> Style -> Layout -> Paint -> Composite. Reflow (Layout) adalah operasi paling mahal. Hindari layout thrashing — membaca dan menulis properti layout secara bergantian.

React performance workflow

React performance workflow ukur dengan Profiler, cari render yang mahal, lalu optimasi titik itu saja. React Compiler dapat mengurangi kebutuhan React.memo, useMemo, dan useCallback, jadi gunakan memoization manual sebagai escape hatch saat ada bottleneck nyata.

Virtualization

Hanya render item yang terlihat di viewport. Untuk list dengan 10.000 item, render 20 item saja.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mengerti browser rendering pipeline., bisa mengoptimasi JavaScript execution., dan mengerti memoization dan virtualization. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Optimasi Runtime, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Browser rendering pipeline adalah proses mengubah kode menjadi pixel di layar — optimasi di setiap stage penting. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. React.memo shallow compare props. useMemo cache hasil komputasi. Virtualization hanya render item yang terlihat.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

// React.memo untuk mencegah re-render tidak perlu
const UserCard = React.memo(function UserCard({ user, onSelect }) {
  return (
    <div onClick={() => onSelect(user.id)}>
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
    </div>
  );
});

// useMemo untuk komputasi mahal
const filteredUsers = useMemo(() => {
  return users.filter(u => u.name.toLowerCase().includes(query.toLowerCase()));
}, [users, query]);

// Virtualization dengan react-window
import { FixedSizeList } from 'react-window';
<FixedSizeList height={500} itemCount={10000} itemSize={50}>
  {({ index, style }) => (
    <div style={style}>User #{index}: {users[index].name}</div>
  )}
</FixedSizeList>

Penjelasan Kode

React.memo shallow compare props. useMemo cache hasil komputasi. Virtualization hanya render item yang terlihat.

Prompt AI

Profile aplikasi React-mu dengan React DevTools Profiler. Identifikasi komponen yang re-render terlalu sering.

Pertanyaan Reflektif

Premature optimization is the root of all evil — tapi Core Web Vitals bukan premature, itu adalah requirement.