React Academy · Pelajaran

Menggunakan Tab Profiler

Rekam render, baca grafik flame, dan identifikasi komponen yang lambat.

Menggunakan Tab Profiler adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan menggunakan Profiler React DevTools untuk merekam perenderan, membaca grafik api, dan mengidentifikasi komponen yang menyebabkan hambatan kinerja.

Membuka Profiler

Klik tab **Profiler** di React DevTools (di samping Komponen). Anda akan melihat tombol Rekam (lingkaran) dan tombol Muat Ulang dan Analisis. Profiler hanya berfungsi dalam mode pengembangan.

Merekam Sesi

Klik **Rekam** (lingkaran), berinteraksilah dengan aplikasi Anda (misalnya mengeklik tombol atau mengetikkan input), lalu klik **Berhenti** (kotak). DevTools akan merekam setiap perenderan yang terjadi selama sesi tersebut.

Membaca Grafik Api

Grafik api menampilkan satu batang untuk setiap komponen pada setiap komit. Lebar batang menunjukkan waktu yang dihabiskan untuk merender. Tumpukan yang tinggi menunjukkan pohon komponen yang dalam. Arahkan kursor ke sebuah batang untuk melihat nama komponen dan durasi perenderan yang tepat.

Linimasa Komit

Di bagian atas Profiler, Anda akan melihat baris batang kecil—satu untuk setiap komit React. Batang yang lebih tinggi menunjukkan komit yang lebih lambat. Klik sebuah batang untuk berpindah ke grafik api komit tersebut.

Mengapa Komponen Dirender

Pilih komponen pada grafik flame, lalu lihat bagian **Mengapa ini dirender?**. Bagian ini menunjukkan apakah komponen dirender karena properti berubah, status berubah, atau komponen induk dirender ulang.

Batang Abu-Abu vs Berwarna

Batang abu-abu berarti komponen **tidak** dirender dalam pembaruan ini (React menggunakan kembali keluaran sebelumnya). Batang berwarna berarti komponen memang dirender ulang — warna yang lebih gelap menunjukkan waktu render yang lebih lama.

Tampilan Grafik Peringkat

Beralih dari grafik flame ke grafik **Peringkat** (gunakan sakelar di bagian atas). Tampilan ini mencantumkan semua komponen yang dirender, diurutkan berdasarkan waktu render, sehingga Anda dapat segera menemukan komponen yang paling lambat.

Rekam & Muat Ulang

Klik **Muat Ulang dan Buat Profil**, bukan Rekam, untuk menangkap pemuatan halaman termasuk render awal. Ini membantu Anda menemukan komponen yang lambat saat pertama kali dipasang.

Mengaktifkan Pembuatan Profil dalam Produksi

Build produksi menonaktifkan alat pembuatan profil secara bawaan. Untuk membuat profil produksi, lakukan build dengan `react-dom/profiling` sebagai alias dan `scheduler/tracing-profiling`. Sebagian besar tim membuat profil dalam pengembangan terlebih dahulu.

Pemeriksaan Singkat

Dalam grafik flame Profiler React DevTools, apa yang diwakili oleh lebar sebuah batang?

Rangkuman

Kini Anda dapat merekam sesi pembuatan profil, membaca grafik flame dan grafik peringkat, memeriksa alasan komponen dirender ulang, serta menggunakan linimasa pembaruan untuk berpindah di antara berbagai render.

Berikutnya

Pelajaran berikutnya: **Menelusuri Kesalahan React yang Umum** — Anda akan mendiagnosis peringatan kunci yang hilang, bug status yang belum terdefinisi, dan ketidaksesuaian hidrasi menggunakan DevTools dan konsol peramban.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggunakan Tab Profiler” gratis?

Ya — teks lengkap “Menggunakan Tab Profiler” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menggunakan Tab Profiler”?

Rekam render, baca grafik flame, dan identifikasi komponen yang lambat. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Menggunakan Tab Profiler” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy