Measuring Before Optimizing
Mengamati interaksi, render, dan hasil Profiler sebelum memutuskan perubahan performance pada React feature.
Tujuan belajar
- Menentukan gejala performance yang perlu diamati
- Menggunakan alur dasar React DevTools Profiler
- Membuat keputusan berdasarkan observasi, termasuk keputusan untuk tidak mengoptimalkan
Isi lesson
5 blok- 1.Mulai dari interaksi yang terasa, bukan dari APIBelum selesaiWajib
- 2.Alur observasi kecil di Local React AppBelum selesaiWajib
- 3.Jangan menganggap console.log sebagai profilerBelum selesaiWajib
- 4.Writing practiceBelum selesaiOpsional
- 5.RingkasanBelum selesaiWajib
Mulai dari interaksi yang terasa, bukan dari API
WajibPerformance work yang baik dimulai dari pertanyaan konkret: interaksi mana yang terasa lambat, pada data seperti apa, dan apa yang terjadi ketika user mengulanginya? React DevTools Profiler membantu merekam commit render sehingga kamu dapat melihat component mana yang ikut bekerja dan berapa lama pekerjaan itu berlangsung.
Profiler bukan perintah untuk mengejar render count paling kecil. Gunakan hasilnya bersama gejala yang dirasakan user. Bila rekaman menunjukkan pekerjaan kecil dan UI tetap responsif, keputusan yang benar bisa saja membiarkan kode tetap sederhana.
Bagian ini memengaruhi progres lesson.
Alur observasi kecil di Local React App
Wajib1. Pilih satu interaksi yang terasa lambat, misalnya mengetik filter list.
2. Siapkan data yang cukup untuk mereproduksi gejalanya.
3. Buka React DevTools, pilih tab Profiler, lalu mulai merekam.
4. Lakukan satu interaksi yang sama seperti user lakukan.
5. Hentikan rekaman dan lihat component yang merender serta durasinya.
6. Tulis dugaan yang didukung rekaman, atau catat bahwa tidak ada masalah yang terbukti.
7. Ubah satu hal kecil hanya jika ada alasan yang jelas, lalu rekam ulang interaksi yang sama.Urutan ini menjaga perbandingan tetap adil. Jangan mengubah banyak hal sekaligus, karena kamu tidak lagi tahu perubahan mana yang benar-benar membantu. Untuk module ini, kamu tidak perlu flamegraph kompleks atau micro-benchmark.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan menganggap console.log sebagai profiler
Render log berguna untuk orientasi awal, tetapi tidak menjelaskan biaya render atau dampak pada interaksi user. Hindari menyimpulkan component lambat hanya dari jumlah log. Gunakan Profiler atau observasi browser untuk mengonfirmasi masalah yang ingin kamu perbaiki.
Bagian ini memengaruhi progres lesson.
Writing practice
OpsionalLatihan menulis
Di Local React App, pilih satu interaksi yang ingin kamu amati. Tulis catatan singkat dengan format berikut: - Interaksi yang direkam: - Data atau kondisi yang dipakai: - Component yang terlihat bekerja: - Gejala yang user rasakan atau tidak rasakan: - Keputusan: optimasi sekarang atau biarkan sederhana, beserta alasannya: Ini adalah self-review lokal. FluentStack tidak dapat memeriksa rekaman Profiler kamu secara otomatis.
Tulis draft dulu sebelum menandai writing practice selesai.
0/320 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Ringkasan
Wajib- Tentukan interaksi dan kondisi yang ingin diamati sebelum membuka Profiler.
- Rekam satu perubahan kecil, lalu gunakan hasilnya untuk mendukung keputusan.
- Tidak mengoptimalkan adalah keputusan yang valid bila masalah belum terbukti.
- Berikutnya, kamu akan mempelajari kapan useMemo dan useCallback benar-benar membantu.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Mulai dari interaksi yang terasa, bukan dari API.