Profiling dengan React DevTools
Gunakan React DevTools Profiler untuk menemukan komponen yang membutuhkan waktu render terlalu lama atau terlalu sering melakukan re-render. Flame graph membantu melihat komponen mana yang paling banyak menggunakan waktu saat proses rendering.
Mengurangi Re-render
Tidak semua re-render perlu dihindari, tetapi render yang tidak diperlukan dapat memengaruhi performa aplikasi. Beberapa teknik yang dapat digunakan:
-
React.memo untuk mencegah render ulang ketika props tidak berubah
-
useMemo untuk menyimpan hasil kalkulasi yang mahal
-
useCallback untuk mempertahankan referensi function
-
Hindari object atau array baru sebagai props jika tidak diperlukan
Gunakan optimasi tersebut berdasarkan hasil profiling, bukan secara berlebihan.
Code Splitting
Aplikasi React yang besar dapat memiliki bundle JavaScript yang cukup berat. Gunakan React.lazy dan Suspense untuk memuat komponen hanya ketika dibutuhkan.
Route-based code splitting menjadi salah satu strategi yang efektif karena pengguna tidak perlu mengunduh seluruh halaman saat pertama kali membuka aplikasi.
Virtualisasi List Panjang
Rendering ribuan data sekaligus dapat membuat browser bekerja lebih berat. Gunakan teknik virtualization dengan library seperti react-window atau TanStack Virtual agar hanya item yang terlihat di layar yang dirender.
Teknik ini sangat berguna untuk tabel, daftar transaksi, dashboard, atau halaman dengan banyak data.
Optimasi Bundle Size
Gunakan tools seperti vite-bundle-visualizer untuk mengetahui library atau module yang memiliki kontribusi besar terhadap ukuran bundle.
Manfaatkan tree-shaking dan hindari mengimpor seluruh library jika hanya membutuhkan beberapa fungsi. Optimasi dependency dapat membantu mengurangi ukuran JavaScript yang harus diunduh pengguna.
Optimasi Loading
Gunakan strategi seperti lazy loading, kompresi asset, caching, dan optimasi gambar untuk mempercepat proses loading. Pastikan resource penting dimuat lebih dahulu dibandingkan resource yang tidak langsung dibutuhkan.
Web Vitals
Pantau metrik Core Web Vitals untuk mengetahui kualitas pengalaman pengguna, terutama LCP, INP, dan CLS.
Metrik tersebut dapat membantu developer menemukan masalah pada loading, interaktivitas, dan stabilitas visual yang juga berpengaruh terhadap pengalaman pengguna serta SEO.
Kesimpulan
Optimasi performa React sebaiknya dimulai dari profiling, kemudian dilanjutkan dengan perbaikan yang terukur. Dengan mengurangi re-render yang tidak perlu, menerapkan code splitting, melakukan virtualisasi, dan mengoptimalkan bundle, aplikasi dapat menjadi lebih cepat dan responsif.